Merge branch 'main' into feat/otel

Author: schloerke

NEWS.md

@@ -8,6 +8,8 @@
 
 * `updateActionButton()`/`updateActionLink()` now correctly renders HTML content passed to the `label` argument. (#4249)
 
+* Fixed an issue where `updateSelectizeInput(options = list(plugins="remove_button"))` could lead to multiple remove buttons. (#4275)
+
 ## Changes
 
 * The return value of `actionButton()`/`actionLink()` changed slightly: `label` and `icon` are wrapped in an additional HTML container element. This allows for: 1. `updateActionButton()`/`updateActionLink()` to distinguish between the `label` and `icon` when making updates and 2. spacing between `label` and `icon` to be more easily customized via CSS. 

inst/www/shared/shiny.js

@@ -480,6 +480,13 @@ textarea.textarea-autoresize.form-control {
   cursor: not-allowed;
 }
 
+// Selectize's remove_button plugin has a bug that can lead to multiple remove
+// buttons being displayed when options get updated. This prevents that from
+// happening (see #4274 for reprex)
+.shiny-input-select .selectize-input > .item > .remove:not(:first-child) {
+  display: none;
+}
+
 /* Hidden tabPanels */
 .nav-hidden {
   /* override anything bootstrap sets for `.nav` */

inst/www/shared/shiny.js.map

@@ -13,9 +13,23 @@ type SelectInputReceiveMessageData = {
   value?: string;
 };
 
-type SelectizeOptions = Selectize.IOptions<string, unknown>;
 type SelectizeInfo = Selectize.IApi<string, unknown> & {
-  settings: SelectizeOptions;
+  settings: Selectize.IOptions<string, unknown>;
+};
+
+type SelectizeOptions = Selectize.IOptions<string, unknown> & {
+  // Provide some stronger typing for the Selectize options
+  labelField: "label";
+  valueField: "value";
+  searchField: ["label"];
+  onItemRemove?: (value: string) => void;
+  onDropdownClose?: () => void;
+};
+
+// Adds a py-shiny specific "option" that makes the
+// input_selectize(remove_button) parameter possible
+type SelectizeShinyOptions = SelectizeOptions & {
+  shinyRemoveButton?: "none" | "true" | "false" | "both";
 };
 
 function getLabelNode(el: SelectHTMLElement): JQuery<HTMLElement> {
@@ -244,13 +258,7 @@ class SelectInputBinding extends InputBinding {
 
     if (config.length === 0) return undefined;
 
-    let options: SelectizeOptions & {
-      labelField: "label";
-      valueField: "value";
-      searchField: ["label"];
-      onItemRemove?: (value: string) => void;
-      onDropdownClose?: () => void;
-    } = $.extend(
+    let options: SelectizeShinyOptions = $.extend(
       {
         labelField: "label",
         valueField: "value",
@@ -259,6 +267,8 @@ class SelectInputBinding extends InputBinding {
       JSON.parse(config.html()),
     );
 
+    options = this._addShinyRemoveButton(options, el.hasAttribute("multiple"));
+
     // selectize created from selectInput()
     if (typeof config.data("nonempty") !== "undefined") {
       el.nonempty = true;
@@ -305,6 +315,44 @@ class SelectInputBinding extends InputBinding {
 
     return control;
   }
+
+  // Translate shinyRemoveButton option into selectize plugins
+  private _addShinyRemoveButton(
+    options: SelectizeShinyOptions,
+    multiple: boolean,
+  ): SelectizeOptions {
+    let removeButton = options.shinyRemoveButton;
+    if (removeButton === undefined) {
+      return options;
+    }
+
+    // None really means 'smart default'
+    if (removeButton === "none") {
+      removeButton = multiple ? "true" : "false";
+    }
+
+    if (removeButton === "false") {
+      return options;
+    }
+
+    const plugins = [];
+    if (removeButton === "both") {
+      plugins.push("remove_button", "clear_button");
+    } else if (removeButton === "true") {
+      plugins.push(multiple ? "remove_button" : "clear_button");
+    }
+
+    // Add plugins to existing plugins if not already present
+    return {
+      ...options,
+      plugins: Array.from(
+        new Set([
+          ...(Array.isArray(options.plugins) ? options.plugins : []),
+          ...plugins,
+        ]),
+      ),
+    };
+  }
 }
 
 export { SelectInputBinding };

inst/www/shared/shiny.min.css

@@ -9,9 +9,8 @@ type SelectInputReceiveMessageData = {
     url?: string;
     value?: string;
 };
-type SelectizeOptions = Selectize.IOptions<string, unknown>;
 type SelectizeInfo = Selectize.IApi<string, unknown> & {
-    settings: SelectizeOptions;
+    settings: Selectize.IOptions<string, unknown>;
 };
 declare class SelectInputBinding extends InputBinding {
     find(scope: HTMLElement): JQuery<HTMLElement>;
@@ -32,6 +31,7 @@ declare class SelectInputBinding extends InputBinding {
     unsubscribe(el: HTMLElement): void;
     initialize(el: SelectHTMLElement): void;
     protected _selectize(el: SelectHTMLElement, update?: boolean): SelectizeInfo | undefined;
+    private _addShinyRemoveButton;
 }
 export { SelectInputBinding };
 export type { SelectInputReceiveMessageData };