fix(form): close searchable single-select dropdown

[lovasoa]

Summary

• close searchable single-select dropdowns after selecting an option
• keep multi-select dropdowns open for additional selections
• add an end-to-end regression test and changelog entry

Fixes #1380.

Validation

• npm test
• targeted Playwright test against a fresh local SQLPage server

CI Builds

• Linux debug build
• Windows debug build

Artifacts require GitHub repository read access and are retained according to the repository Actions retention policy.

[T-Doschke]

Have testet this Version.
can confirm that properties have changed

closeafterselect is now set as true ( befor fix it was undefined.

But that does not close the dropdown.
So AI was wrong seeing this or tomselect itself has a bug.

[T-Doschke]

in dev mode of browser i tested some thing:
var ts = document.querySelector('select[name="reminder_to"]').tomselect;

ts.trigger = new Proxy(ts.trigger, {
apply(target, thisArg, args) {
console.log("EVENT:", args[0]);
return target.apply(thisArg, args);
}
});

this will schow:
Proxy(Function) {length: 1, name: 'trigger'}[[Handler]]: Object[[Target]]: trigger(e,...i){var s=this t(e,t=> {…}[[IsRevoked]]: false
VM3828:5 EVENT: dropdown_close
VM3828:5 EVENT: blur
VM3828:5 EVENT: focus
VM3828:5 EVENT: dropdown_open
VM3828:5 EVENT: item_remove
VM3828:5 EVENT: clear
VM3828:5 EVENT: item_add
VM3828:5 EVENT: dropdown_open
VM3828:5 EVENT: change
VM3828:5 EVENT: dropdown_close
VM3828:5 EVENT: dropdown_close
VM3828:5 EVENT: dropdown_open

so the dropdown will be closed now, but is directly after this opened again.

Next test:
var ts = document.querySelector('select[name="reminder_to"]').tomselect;

ts.on('focus', function() {
console.log("FOCUS STACK");
console.trace();
});

logged:
undefined
VM3828:5 EVENT: focus
VM4691:4 FOCUS STACK
VM4691:5 console.trace
(anonymous) @ VM4691:5
(anonymous) @ tomselect.8b858dd415bd5530.js:12
(anonymous) @ tomselect.8b858dd415bd5530.js:12
(anonymous) @ tomselect.8b858dd415bd5530.js:6
t @ tomselect.8b858dd415bd5530.js:6
trigger @ tomselect.8b858dd415bd5530.js:11
apply @ VM3828:6
onFocus @ tomselect.8b858dd415bd5530.js:220
(anonymous) @ tomselect.8b858dd415bd5530.js:250
setTimeout
focus @ tomselect.8b858dd415bd5530.js:249
onClick @ tomselect.8b858dd415bd5530.js:196
(anonymous) @ tomselect.8b858dd415bd5530.js:186
VM3828:5 EVENT: dropdown_open
VM3828:5 EVENT: item_remove
VM3828:5 EVENT: clear
VM3828:5 EVENT: item_add
VM3828:5 EVENT: dropdown_open
VM3828:5 EVENT: change
VM3828:5 EVENT: dropdown_close
VM3828:5 EVENT: dropdown_close
VM3828:5 EVENT: dropdown_open

So tomselect itself uses onfocus to reopen the dropdown.
this is a race condition from tomselect itself.
Only workaround is additem functions must contain
this.blur()
this.close()
to overwrite reopen, which is timed event.

in your tomselect.js
onItemAdd: function () {
this.setTextboxValue("");
this.refreshOptions();

if (this.settings.mode === "single") {
    this.blur();
    this.close();
}

}
to overcome this timed tomselect event and refocus and therefor open again.

[T-Doschke]

may be you can add extra check in this if, to only do it if this is a searchable input field.