mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
57af1de680
We need the dropdown to stay open after select so that a multi-selection select work as expected. Docs : https://tom-select.js.org/docs/
33 lines
878 B
JavaScript
33 lines
878 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 = {}) {
|
|
this.control = new TomSelect(this.element, {
|
|
maxItems: 1,
|
|
maxOptions: null,
|
|
plugins: ["dropdown_input"],
|
|
allowEmptyOption: true, // Show blank option (option with empty value)
|
|
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;
|
|
}
|
|
}
|