feat: Improvements to selectize plugin defaults/updates

CHANGELOG.md

@@ -27,6 +27,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * `playwright.controller.InputActionButton` gains a `expect_icon()` method. As a result, the already existing `expect_label()` no longer includes the icon. (#2020)
 
+* `ui.input_selectize()`'s `remove_button` parameter gains a supported value of `"both"`, which adds both of the `"remove_button"` and `"clear_button"` selectize plugins. This is most useful when `multiple=True`, allowing for clearing of individual as well as _all_ selected items. (#2064)
+
 ### Changes
 
 * `express.ui.insert_accordion_panel()`'s function signature has changed to be more ergonomic. Now you can pass the `panel_title` and `panel_contents` directly instead of `ui.hold()`ing the `ui.accordion_panel()` context manager. (#2042)
@@ -49,11 +51,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
-* Fixed numerous issues related to programmatically updating selectize options. (#2053)
-   * `update_selectize(options=...)` no longer gets ignored when `server=False` (the default).
-   * `update_selectize(options=...)` now works as expected in a module.
-
-* Fixed an issue with `update_selectize()` to properly display labels with HTML reserved characters like "&" (#1330)
+* Fixed numerous issues with `update_selectize()`:
+   * `options` now works when `server=False`. (#2053)
+   * `options` now works when used in a module. (#2053)
+   * `options` now correctly preserves `remove_button` on update. (#2064)
+   * HTML reserved characters (i.e., `&`, `<`, `>`) inside `choices` labels no longer get incorrectly escaped (when `server=True`). (#1330)
 
 * Fixed an issue with `ui.Chat()` sometimes wanting to scroll a parent element. (#1996)
 

shiny/ui/_input_select.py

@@ -9,9 +9,8 @@
     "input_select",
     "input_selectize",
 )
-import copy
-from json import dumps
-from typing import Any, Mapping, Optional, Union, cast
+import json
+from typing import Literal, Mapping, Optional, Union, cast
 
 from htmltools import Tag, TagChild, TagList, css, div, tags
 
@@ -59,7 +58,7 @@ def input_selectize(
     selected: Optional[str | list[str]] = None,
     multiple: bool = False,
     width: Optional[str] = None,
-    remove_button: Optional[bool] = None,
+    remove_button: Optional[Literal[True, False, "both"]] = None,
     options: Optional[dict[str, Jsonifiable | JSEval]] = None,
 ) -> Tag:
     """
@@ -85,9 +84,16 @@ def input_selectize(
     width
         The CSS width, e.g. '400px', or '100%'
     remove_button
-        Whether to add a remove button. This uses the `clear_button` and `remove_button`
-        selectize plugins which can also be supplied as options. By default it will apply a
-        remove button to multiple selections, but not single selections.
+        Whether to include remove button(s). The following values are supported:
+
+        - `None` (the default): The 'remove_button' selection plugin is included when
+          `multiple=True`.
+        - `True`: Same as `None` in the `multiple=True` case, but when `multiple=False`,
+          the 'clear_button' plugin is included.
+        - `False`: No plugins are included.
+        - `"both"`: Both 'remove_button' and 'clear_button' plugins are included. This
+          is useful for being able to clear each and all selected items when
+          `multiple=True`.
     options
         A dictionary of options. See the documentation of selectize.js for possible options.
         If you want to pass a JavaScript function, wrap the string in `ui.JS`.
@@ -245,14 +251,12 @@ def _input_select_impl(
     selectize: bool = False,
     width: Optional[str] = None,
     size: Optional[str] = None,
-    remove_button: Optional[bool] = None,
+    remove_button: Optional[Literal[True, False, "both", None]] = None,
     options: Optional[dict[str, Jsonifiable | JSEval]] = None,
 ) -> Tag:
     if options is not None and selectize is False:
         raise Exception("Options can only be set when selectize is `True`.")
 
-    remove_button = _resolve_remove_button(remove_button, multiple)
-
     resolved_id = resolve_id(id)
 
     choices_ = _normalize_choices(choices)
@@ -264,10 +268,22 @@ def _input_select_impl(
     if options is None:
         options = {}
 
-    opts = _update_options(options, remove_button, multiple)
-
     choices_tags = _render_choices(choices_, selected)
 
+    # Add our own special remove_button option
+    options["shinyRemoveButton"] = str(remove_button).lower()
+
+    selectize_config = None
+    if selectize:
+        selectize_config = tags.script(
+            json.dumps(options),
+            selectize_deps(),
+            type="application/json",
+            data_for=resolved_id,
+            # Which option values should be interpreted as JS?
+            data_eval=json.dumps(extract_js_keys(options)),
+        )
+
     return div(
         shiny_input_label(resolved_id, label),
         div(
@@ -279,56 +295,13 @@ def _input_select_impl(
                 multiple=multiple,
                 size=size,
             ),
-            (
-                TagList(
-                    tags.script(
-                        dumps(opts),
-                        type="application/json",
-                        data_for=resolved_id,
-                        data_eval=dumps(extract_js_keys(opts)),
-                    ),
-                    selectize_deps(),
-                )
-                if selectize
-                else None
-            ),
+            selectize_config,
         ),
         class_="form-group shiny-input-container",
         style=css(width=width),
     )
 
 
-def _resolve_remove_button(remove_button: Optional[bool], multiple: bool) -> bool:
-    if remove_button is None:
-        if multiple:
-            return True
-        else:
-            return False
-    return remove_button
-
-
-def _update_options(
-    options: dict[str, Any], remove_button: bool, multiple: bool
-) -> dict[str, Any]:
-    opts = copy.deepcopy(options)
-    plugins = opts.get("plugins", [])
-
-    if remove_button:
-        if multiple:
-            to_add = "remove_button"
-        else:
-            to_add = "clear_button"
-
-        if to_add not in plugins:
-            plugins.append(to_add)
-
-    if not plugins:
-        return options
-
-    opts["plugins"] = plugins
-    return opts
-
-
 def _normalize_choices(x: SelectChoicesArg) -> _SelectChoices:
     if x is None:
         raise TypeError("`choices` must be a list, tuple, or dict.")
@@ -338,19 +311,6 @@ def _normalize_choices(x: SelectChoicesArg) -> _SelectChoices:
         return x
 
 
-def _contains_html(x: _SelectChoices) -> bool:
-    for v in x.values():
-        if isinstance(v, Mapping):
-            # Check the `_Choices` values of `_OptGrpChoices`
-            for vv in v.values():
-                if not isinstance(vv, str):
-                    return True
-        else:
-            if not isinstance(v, str):
-                return True
-    return False
-
-
 def _render_choices(
     x: _SelectChoices, selected: Optional[str | list[str]] = None
 ) -> TagList:

shiny/ui/_input_update.py

@@ -721,6 +721,7 @@ def update_selectize(
     label: Optional[TagChild] = None,
     choices: Optional[SelectChoicesArg] = None,
     selected: Optional[str | list[str]] = None,
+    remove_button: Optional[Literal[True, False, "both"]] = None,
     options: Optional[dict[str, str | float | JSEval]] = None,
     server: bool = False,
     session: Optional[Session] = None,
@@ -741,8 +742,18 @@ def update_selectize(
         ``<optgroup>`` labels.
     selected
         The values that should be initially selected, if any.
+    remove_button
+        Whether to include remove button(s). The following values are supported:
+
+        - `None` (the default): do nothing.
+        - `True`: Adds the 'remove_button'/'clear_button' plugin (depending on `multiple`).
+        - `False`: Previously added remove_button plugins are removed.
+        - `"both"`: Both 'remove_button' and 'clear_button' plugins are added. This
+          is useful for being able to clear each and all selected items when
+          `multiple=True`.
     options
-        Options to send to update, see `input_selectize` for details.
+        Selectize.js options to customize the behavior of the select input.
+        See <https://selectize.dev/docs/usage> for more details.
     server
         Whether to store choices on the server side, and load the select options
         dynamically on searching, instead of writing all choices into the page at once
@@ -762,7 +773,9 @@ def update_selectize(
 
     session = require_active_session(session)
 
-    if options is not None:
+    if options is not None or remove_button is not None:
+        options = options or {}
+        options["shinyRemoveButton"] = str(remove_button).lower()
         cfg = tags.script(
             json.dumps(options),
             type="application/json",

shiny/www/shared/_version.json

@@ -1,5 +1,5 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
   "package": "shiny",
-  "version": "1.11.1.9000 (rstudio/shiny@0e355ed25cc1066d6894733f04f4b511a27acc53)"
+  "version": "1.11.1.9000 (rstudio/shiny@f981ed6363f5f2a2fd84cd23c7475ef721e2ff6c)"
 }

shiny/www/shared/bootstrap/_version.json

@@ -1,6 +1,6 @@
 {
   "note!": "Generated by scripts/htmlDependencies.R: do not edit by hand",
-  "shiny_version": "1.11.1.9000 (rstudio/shiny@0e355ed25cc1066d6894733f04f4b511a27acc53)",
+  "shiny_version": "1.11.1.9000 (rstudio/shiny@f981ed6363f5f2a2fd84cd23c7475ef721e2ff6c)",
   "bslib_version": "0.9.0.9000 (rstudio/bslib@9562108e40a0bffb4a7c8709c2963509435c5c0f)",
   "htmltools_version": "0.5.8.9000 (rstudio/htmltools@487aa0bed7313d7597b6edd5810e53cab0061198)",
   "bootstrap_version": "5.3.1"

shiny/www/shared/sass/shiny/www/shared/shiny_scss/shiny.scss

@@ -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` */