app/assets/javascripts/spina/controllers/page_select_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static get targets() {
return ['input', 'label', 'search']
}
connect() {
// Show placeholder if there is no page selected yet
if (this.labelTarget.querySelector("turbo-frame") == undefined) {
this.clear()
}
}
select(event) {
let button = event.currentTarget
this.inputTarget.value = button.dataset.id
this.labelTarget.innerText = button.dataset.title
}
clear() {
this.inputTarget.value = ""
this.labelTarget.innerHTML = `
<span class="text-gray-400">
${this.element.dataset.placeholder}
</span>
`
}
autofocus() {
setTimeout(function() {
this.searchTarget.focus()
}.bind(this), 100)
}
}