Repository navigation
form with single select dropdown field, with searchable on, remains open after choosing an entry #1380
Description
Introduction
form with single select dropdown field remains open after choosing an entry
To Reproduce
select 'form' as component,
'import' as validate;
select
'docstatus' as name,
'select' as type,
2 as width,
'[{"label":"released","value":"50"},{"label":"created","value":"10"}]' as options;Actual behavior
After following these steps, what happened ?
UX click on dropdown, select an entry, dropdown remains visible.
Screenshots
If applicable, add screenshots to help explain your problem.
Expected behavior
after choosing an entry, dropdown should close.
Version information
- OS: windows
- MSSQL
- SQLPage Version 0.45.0
Additional context
your tomselect.js
has on line 33 following;
onItemAdd: function () {
this.setTextboxValue("");
this.refreshOptions();
},
...
this need extension
onItemAdd: function () {
this.setTextboxValue("");
this.refreshOptions();
if (this.settings.mode === "single") {
this.blur();
this.close();
}
},
...
or without this.bur() line.workaround so far:
select 'html' as component,
'<script>
window.addEventListener("load", function() {
const sel = document.querySelector("select[name=reminder_to]");
console.log("Select gefunden:", !!sel);
console.log("TomSelect vorhanden:", !!sel?.tomselect);
if (sel?.tomselect) {
sel.tomselect.on("item_add", function() {
console.log("item_add");
this.blur();
this.close();
});
console.log("Hook registriert");
}
});
</script>
' as html;
Activity
T-Doschke commentedon Aug 13, 2026
in workaround code i have it only for the field reminder_to.
you need as workaround your fieldname.
T-Doschke commentedon Aug 13, 2026
lovasoa commentedon Aug 14, 2026
Hi ! Can you please send a minimal reproduction with an associated screen capture explaining your issue ? What did you expect and what did you see instead ? The code you posted above does not seem to match your actual screenshot.
Screen.Recording.2026-08-14.at.22.27.47.mov
lovasoa commentedon Aug 14, 2026
Are you talking about the fact that when you have a select with multiple options, you can select multiple options without having to refocus the input field every time ? This is on purpose, the makes the field more usable for your users.
This is the first example in the tom select library: https://tom-select.js.org/examples/
T-Doschke commentedon Aug 14, 2026
did a little further investigation.
this problem seems only occure when dropdown is feeded with option_sql from database json.
Have to build up testdata so i can record a video.
with workaroundcode it works.
lovasoa commentedon Aug 14, 2026
I think you just meant to add
1 as searchable,. But I think what you are seeing is the intended behavior, not a bug.T-Doschke commentedon Aug 14, 2026
you mean, when dropbox is searchable then it does not close after selecting from list?
is this because UX thinks of user want another search after choosing an entry?
But its a single select field, so after selecting something it should close.
can live with my workaround, but i think this is not wanted.
if its a multi select, then its ok, but single select should close after user selects something.
here options_sql delivers ~500 entrys and without search its endless scrolling for user.
lovasoa commentedon Aug 14, 2026
Ok ! Can you edit your initial message with a clear explanation and minimal repro (without database data), and I'll have a look !
[-]form with single select dropdown field remains open after choosing an entry[/-][+]form with single select dropdown field, with searchable on, remains open after choosing an entry[/+]T-Doschke commentedon Aug 14, 2026
minimal explanation:
Aufzeichnung.2026-08-14.230850.mp4
this is for sample.
my code does a select from db with ~500 rows (email adresses) and user should select one.
without search its endless scrolling and with search after selecting one, dropdown does not close.
T-Doschke commentedon Aug 14, 2026
AI tells me that tom-select initialization is done without
closeAfterSelect: true
for a single value field.
May be this will do the same as function this.blur() and this.close().
its may be wrong, i am not a html and java script secialist.
lovasoa commentedon Aug 15, 2026
I confirm I can reproduce your issue now, thanks.
I have a fix ready in #1381
@T-Doschke can you please download the CI build from that link and confirm it solves your issue?