Fixed a bug where select dropdown fields would retain their state when their form is reset.

fixes #672

Author: lovasoa

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Avoid generating file names that contain spaces in `sqlpage.persist_uploaded_file`. This makes it easier to use the file name in URLs without URL-encoding it.
 - Fixed a bug with REAL value decoding in Microsoft SQL Server.
 - Support preserving the timezone of `DATETIMEOFFSET` columns in Microsoft SQL Server and `TIMESTAMPTZ` columns in Postgres. Previously, all datetime columns were converted to UTC.
+- Fixed a bug where select dropdown fields would retain their state when their form is reset.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -368,7 +368,7 @@ left join my_user_options
     on  my_options.id = my_user_options.option_id
     and my_user_options.user_id = $user_id
 ```
-', json('[{"component":"form", "action":"examples/show_variables.sql"}, 
+', json('[{"component":"form", "action":"examples/show_variables.sql", "reset": "Reset"}, 
     {"label": "Fruits", "name": "fruits[]", "type": "select", "multiple": true, "create_new":true, "placeholder": "Good fruits...", "searchable": true, "description": "press ctrl to select multiple values", "options":
         "[{\"label\": \"Orange\", \"value\": 0, \"selected\": true}, {\"label\": \"Apple\", \"value\": 1}, {\"label\": \"Banana\", \"value\": 3, \"selected\": true}]"}
     ]')),

sqlpage/sqlpage.js

@@ -70,27 +70,6 @@ function sqlpage_table() {
   }
 }
 
-function sqlpage_select_dropdown() {
-  const selects = document.querySelectorAll("[data-pre-init=select-dropdown]");
-  if (!selects.length) return;
-  const src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.popular.min.js";
-  if (!window.TomSelect) {
-    const script = document.createElement("script");
-    script.src = src;
-    script.integrity = "sha384-aAqv9vleUwO75zAk1sGKd5VvRqXamBXwdxhtihEUPSeq1HtxwmZqQG/HxQnq7zaE";
-    script.crossOrigin = "anonymous";
-    script.nonce = nonce;
-    script.onload = sqlpage_select_dropdown;
-    document.head.appendChild(script);
-    return;
-  }
-  for (const s of selects) {
-    new TomSelect(s, {
-      create: s.dataset.create_new
-    });
-  }
-}
-
 let is_leaflet_injected = false;
 let is_leaflet_loaded = false;
 

sqlpage/tomselect.js

@@ -1,17 +1,18 @@
 /* !include https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.popular.min.js */
 
 function sqlpage_select_dropdown() {
-    for (const s of document.querySelectorAll("[data-pre-init=select-dropdown]")) {
-        // 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,
-        });
-        if (is_focused) tom.focus();
-    }
+  for (const s of document.querySelectorAll("[data-pre-init=select-dropdown]")) {
+    // 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,
+    });
+    if (is_focused) tom.focus();
+    s.form?.addEventListener("reset", () => setTimeout(tom.sync.bind(tom), 0));
+  }
 }
 
 add_init_fn(sqlpage_select_dropdown);