lovasoa
dc9353bd64
In forms with a searchable select dropdown, the search field now resets itself after an item is selected, to let the user easily select another item. Fixes https://github.com/sqlpage/SQLPage/issues/706
26 lines
864 B
JavaScript
26 lines
864 B
JavaScript
/* !include https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.popular.min.js */
|
|
|
|
function sqlpage_select_dropdown() {
|
|
for (const s of document.querySelectorAll(
|
|
"[data-pre-init=select-dropdown]",
|
|
)) {
|
|
s.removeAttribute("data-pre-init");
|
|
// See: https://github.com/orchidjs/tom-select/issues/716
|
|
// By default, TomSelect will not retain the focus if s is already focused
|
|
// This is a workaround to fix that
|
|
const is_focused = s === document.activeElement;
|
|
const tom = new TomSelect(s, {
|
|
create: s.dataset.create_new,
|
|
maxOptions: null,
|
|
onItemAdd: function () {
|
|
this.setTextboxValue("");
|
|
this.refreshOptions();
|
|
},
|
|
});
|
|
if (is_focused) tom.focus();
|
|
s.form?.addEventListener("reset", () => setTimeout(tom.sync.bind(tom), 0));
|
|
}
|
|
}
|
|
|
|
add_init_fn(sqlpage_select_dropdown);
|