form with single select dropdown field, with searchable on, remains open after choosing an entry

[T-Doschke]

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;

[T-Doschke]

in workaround code i have it only for the field reminder_to.
you need as workaround your fieldname.

[T-Doschke]

[lovasoa]

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]

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]

did a little further investigation.
this problem seems only occure when dropdown is feeded with option_sql from database json.

select 'form' as component,
'import.sql' as action,
'import' as validate;

select
 'reminder_to' as name,
 'reminder to' as label,
 'select' as type,
 4 as width,
 1 as searchable,
 (select 
   email as label,
   idp_id as value,
   CASE 
    WHEN idp_id = (SELECT dok_dat_feld_34 FROM [D3P].[dbo].firmen_spezifisch WHERE doku_id = $ersatzdoc) THEN 1
    ELSE 0
   END as selected
  FROM [D3P].[dbo].[benutzer]
  FOR JSON PATH) as options;

Have to build up testdata so i can record a video.
with workaroundcode it works.

-- workaround for tom-select single field select does not close dropdown
select 'html' as component,
'<script>
window.addEventListener("load", function() {
    const sel = document.querySelector("select[name=reminder_to]");
    if (sel?.tomselect) {
        sel.tomselect.on("item_add", function() {
            console.log("item_add");
            this.blur();
            this.close();
        });
    }
});
</script>
' as html;
´´´

[lovasoa]

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]

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]

Ok ! Can you edit your initial message with a clear explanation and minimal repro (without database data), and I'll have a look !

[T-Doschke]

minimal explanation:

Aufzeichnung.2026-08-14.230850.mp4

select 'form' as component,
'import' as validate;

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

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]

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.