fix: add CSS workaround to hide all but the first selectize remove button (#4275)

* fix: add CSS workaround to hide all but the first selectize remove button

* Update news

* Apply suggestions from code review

Author: cpsievert

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.min.css

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