workaround for selectize/selectize.js#2032

rstudio · Aug 23, 2023 · 879fe7b · 879fe7b
1 parent 721bc9f
commit 879fe7b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 7 deletions.
diff --git a/inst/www/shared/shiny.js b/inst/www/shared/shiny.js
@@ -8804,7 +8804,7 @@
         if (!$el.hasClass("symbol")) {
           return null;
         }
-        if ($el.attr("multiple") === "multiple") {
+        if (this._isMultipleSelect($el)) {
           return "shiny.symbolList";
         } else {
           return "shiny.symbol";
@@ -8976,8 +8976,20 @@
           control.destroy();
           control = $el.selectize(settings)[0].selectize;
         }
+        if (this._isMultipleSelect($el)) {
+          control.on("item_add", function() {
+            var input = control.$control_input;
+            if (input && input.length)
+              input[0].focus();
+          });
+        }
         return control;
       }
+    }, {
+      key: "_isMultipleSelect",
+      value: function _isMultipleSelect($el) {
+        return $el.attr("multiple") === "multiple";
+      }
     }]);
     return SelectInputBinding2;
   }(InputBinding);

diff --git a/inst/www/shared/shiny.js.map b/inst/www/shared/shiny.js.map
diff --git a/inst/www/shared/shiny.min.js b/inst/www/shared/shiny.min.js
diff --git a/inst/www/shared/shiny.min.js.map b/inst/www/shared/shiny.min.js.map
diff --git a/srcts/src/bindings/input/selectInput.ts b/srcts/src/bindings/input/selectInput.ts
@@ -17,6 +17,8 @@ type SelectInputReceiveMessageData = {
 type SelectizeOptions = Selectize.IOptions<string, unknown>;
 type SelectizeInfo = Selectize.IApi<string, unknown> & {
   settings: SelectizeOptions;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  $control_input?: JQuery<HTMLElement>;
 };
 
 function getLabelNode(el: SelectHTMLElement): JQuery<HTMLElement> {
@@ -52,7 +54,7 @@ class SelectInputBinding extends InputBinding {
       // default character type
       return null;
     }
-    if ($el.attr("multiple") === "multiple") {
+    if (this._isMultipleSelect($el)) {
       return "shiny.symbolList";
     } else {
       return "shiny.symbol";
@@ -292,8 +294,22 @@ class SelectInputBinding extends InputBinding {
       control.destroy();
       control = $el.selectize(settings)[0].selectize as SelectizeInfo;
     }
+
+    // (Hopefully temporary) workaround for a v0.15.2 selectize bug where the
+    // dropdown (instead of the <input>) gets focus after an item added via
+    // click. https://github.com/selectize/selectize.js/issues/2032
+    if (this._isMultipleSelect($el)) {
+      control.on("item_add", function () {
+        const input = control.$control_input;
+        if (input && input.length) input[0].focus();
+      });
+    }
+
     return control;
   }
+  protected _isMultipleSelect($el: JQuery<HTMLElement>): boolean {
+    return $el.attr("multiple") === "multiple";
+  }
 }
 
 export { SelectInputBinding };

diff --git a/srcts/types/src/bindings/input/selectInput.d.ts b/srcts/types/src/bindings/input/selectInput.d.ts
@@ -14,6 +14,7 @@ type SelectInputReceiveMessageData = {
 type SelectizeOptions = Selectize.IOptions<string, unknown>;
 type SelectizeInfo = Selectize.IApi<string, unknown> & {
     settings: SelectizeOptions;
+    $control_input: JQuery<HTMLElement>;
 };
 declare class SelectInputBinding extends InputBinding {
     find(scope: HTMLElement): JQuery<HTMLElement>;