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.

[T-Doschke]

have tested this new fix version with the docstatus field.
select
'docstatus' as name,
'Document Status' as label,
'select' as type,
1 as searchable,
2 as width,
'[{"label":"released","value":"50"},{"label":"created","value":"10"}]' as options;

DeV Console from browser:
var ts = document.querySelector('select[name="docstatus"]').tomselect;

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

Proxy(Function) {length: 1, name: 'trigger'}
VM105:5 EVENT: focus
VM105:5 EVENT: dropdown_open
VM105:5 EVENT: item_remove
VM105:5 EVENT: clear
VM105:5 EVENT: item_add
VM105:5 EVENT: dropdown_open
VM105:5 EVENT: change
VM105:5 EVENT: dropdown_close
VM105:5 EVENT: dropdown_close
VM105:5 EVENT: dropdown_open

internaly dropdown gets closed but reopen dirct after that event.
I am sorry but that does not solve the issue.

Extra scripting embedded in sqlpage with deferred loading solves the issue:
select 'html' as component,
'<script>
window.addEventListener("load", function() {
const sel = document.querySelector("select[name=docstatus]");
if (sel?.tomselect) {
sel.tomselect.on("item_add", function() {
console.log("item_add");
this.blur();
this.close();
});
}
});
</script>
' as html;

tomselect does it right to close this dropbox with closeafterselect:true , but it gets focus again (or whatever) and reopens right after that, so user does not see its closed.

[lovasoa]

@T-Doschke : i can't read your comment because of the formatting, but I can confirm I have tested the fix.

[T-Doschke]

have tested this new fix version with the docstatus field.
select
'docstatus' as name,
'Document Status' as label,
'select' as type,
1 as searchable,
2 as width,
'[{"label":"released","value":"50"},{"label":"created","value":"10"}]' as options;

DeV Console from browser:
var ts = document.querySelector('select[name="docstatus"]').tomselect;

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

Proxy(Function) {length: 1, name: 'trigger'}
VM105:5 EVENT: focus
VM105:5 EVENT: dropdown_open
VM105:5 EVENT: item_remove
VM105:5 EVENT: clear
VM105:5 EVENT: item_add
VM105:5 EVENT: dropdown_open
VM105:5 EVENT: change
VM105:5 EVENT: dropdown_close
VM105:5 EVENT: dropdown_close
VM105:5 EVENT: dropdown_open

internaly dropdown gets closed but reopen dirct after that event.
I am sorry but that does not solve the issue.

Extra scripting embedded in sqlpage with deferred loading solves the issue:
select 'html' as component,
'<script>
window.addEventListener("load", function() {
const sel = document.querySelector("select[name=docstatus]");
if (sel?.tomselect) {
sel.tomselect.on("item_add", function() {
console.log("item_add");
this.blur();
this.close();
});
}
});
</script>
' as html;

tomselect does it right to close this dropbox with closeafterselect:true , but it gets focus again (or whatever) and reopens right after that, so user does not see its closed.

[lovasoa]

@T-Doschke : your comment looks AI-written.

Just retried with the following sql file.

select 'form' as component;
select
'docstatus' as name,
'Document Status' as label,
'select' as type,
1 as searchable,
2 as width,
'[{"label":"released","value":"50"},{"label":"created","value":"10"}]' as options;

I confirm the issue you initially reported is now fixed. Selecting an option DOES close the dropdown.

[T-Doschke]

then i do not have the newest fix version and tested may be the "old" fix again.
Whem i download teh debug version from above debug link ist does not solve the issue.
But as you have tested it again and found it helps, then i must wait till next release.