mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
b97890b537
Hmm, but this isn't useful until we get Tom-Select to work the way we want.. To do that, I think we'd ned to hook into TS to clear the current selection when focused, then set it back upon blur (if no selection was made). Hmm, but we still want it to show slected in the dropdown list. Can we do it with css maybe?
35 lines
962 B
JavaScript
35 lines
962 B
JavaScript
import { Controller } from "stimulus";
|
|
import TomSelect from "tom-select/dist/esm/tom-select.complete";
|
|
|
|
export default class extends Controller {
|
|
static values = { options: Object, placeholder: String };
|
|
|
|
connect(options = {}) {
|
|
console.log(this.element, this.placeholderValue);
|
|
this.control = new TomSelect(this.element, {
|
|
maxItems: 1,
|
|
maxOptions: null,
|
|
plugins: ["dropdown_input"],
|
|
allowEmptyOption: true, // Show blank option (option with empty value)
|
|
closeAfterSelect: true,
|
|
placeholder: this.placeholderValue || this.#emptyOption(),
|
|
onItemAdd: function () {
|
|
this.setTextboxValue("");
|
|
},
|
|
...this.optionsValue,
|
|
...options,
|
|
});
|
|
}
|
|
|
|
disconnect() {
|
|
if (this.control) this.control.destroy();
|
|
}
|
|
|
|
// private
|
|
|
|
#emptyOption() {
|
|
const optionsArray = [...this.element.options];
|
|
return optionsArray.find((option) => [null, ""].includes(option.value))?.text;
|
|
}
|
|
}
|