fix(toolbar): eliminate duplicate id in toolbar_input_select()

NEWS.md

@@ -4,6 +4,10 @@
 
 * `show_offcanvas()` now accepts a character `id` to reveal a panel already in the UI, in addition to a `bslib_offcanvas` object. Previously, a bare string was treated as body content for a new anonymous panel; it is now treated as an id lookup instead, and errors if it looks like body text (e.g. it contains whitespace or is empty). `htmltools::HTML()` continues to be treated as body content. (#1346)
 
+## Bug fixes
+
+* Fixed `toolbar_input_select()` creating duplicate element IDs by assigning the same ID to both the container div and the inner select element. The select element now receives a distinct ID using the pattern `{id}-select`. (#1350)
+
 ## Improvements
 
 * Navsets created with an `id` (e.g. `navset_tab(id = "tabs")`) now use that `id` as their `data-tabsetid`, so their tab panes get stable `tab-tabs-1` style DOM ids instead of ones derived from a random integer. This makes the rendered markup reproducible across renders and easier to target from custom CSS and JavaScript. Navsets without an `id`, and `nav_menu()` dropdowns, keep the random ID. (#1342)

R/toolbar.R

@@ -640,7 +640,7 @@ toolbar_input_select <- function(
   }
 
   select_tag <- tags$select(
-    id = id,
+    id = sprintf("%s--select", id),
     class = "form-select form-select-sm",
     `data-shiny-no-bind-input` = NA,
     processed$options
@@ -657,10 +657,9 @@ toolbar_input_select <- function(
   )
 
   label_elem <- tags$label(
-    # shiny::selectInput() append `-label` to id for the label `for` attribute
-    id = sprintf("%s-label", id),
+    id = sprintf("%s--label", id),
     class = "control-label",
-    `for` = id,
+    `for` = sprintf("%s--select", id),
     icon_elem,
     tags$span(
       class = "bslib-toolbar-label",

tests/testthat/_snaps/toolbar.md

@@ -178,11 +178,11 @@
         choices = c("A", "B", "C"), tooltip = FALSE))
     Output
       <div id="select1" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="select1-label" class="control-label" for="select1">
+        <label id="select1--label" class="control-label" for="select1--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">Basic select</span>
         </label>
-        <select id="select1" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
+        <select id="select1--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
       <option value="B">B</option>
       <option value="C">C</option></select>
       </div>
@@ -195,11 +195,11 @@
         tooltip = FALSE))
     Output
       <div id="select2" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="select2-label" class="control-label" for="select2">
+        <label id="select2--label" class="control-label" for="select2--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">Select with selected</span>
         </label>
-        <select id="select2" class="form-select form-select-sm" data-shiny-no-bind-input><option value="Option 1">Option 1</option>
+        <select id="select2--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="Option 1">Option 1</option>
       <option value="Option 2" selected>Option 2</option>
       <option value="Option 3">Option 3</option></select>
       </div>
@@ -212,11 +212,11 @@
         tooltip = FALSE))
     Output
       <div class="bslib-toolbar-input-select shiny-input-container bg-success-subtle" id="select3" style="width: 400px">
-        <label id="select3-label" class="control-label" for="select3">
+        <label id="select3--label" class="control-label" for="select3--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">Select with custom class</span>
         </label>
-        <select id="select3" class="form-select form-select-sm" data-shiny-no-bind-input><option value="X" selected>X</option>
+        <select id="select3--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="X" selected>X</option>
       <option value="Y">Y</option>
       <option value="Z">Z</option></select>
       </div>
@@ -227,11 +227,11 @@
       show_raw_html(grouped_select)
     Output
       <div id="grouped" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="grouped-label" class="control-label" for="grouped">
+        <label id="grouped--label" class="control-label" for="grouped--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">Grouped select</span>
         </label>
-        <select id="grouped" class="form-select form-select-sm" data-shiny-no-bind-input><optgroup label="Group A">
+        <select id="grouped--select" class="form-select form-select-sm" data-shiny-no-bind-input><optgroup label="Group A">
       <option value="A1" selected>A1</option>
       <option value="A2">A2</option>
       </optgroup>
@@ -248,15 +248,15 @@
         choices = c("A", "B"), tooltip = TRUE))
     Output
       <div id="tooltip_true" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="tooltip_true-label" class="control-label" for="tooltip_true">
+        <label id="tooltip_true--label" class="control-label" for="tooltip_true--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">My Select Label</span>
         </label>
         <bslib-tooltip id="tooltip_true_tooltip" placement="bottom" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
           <template>
             <span aria-hidden="true">My Select Label</span>
           </template>
-          <select id="tooltip_true" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
+          <select id="tooltip_true--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
       <option value="B">B</option></select>
         </bslib-tooltip>
       </div>
@@ -268,13 +268,13 @@
         choices = c("A", "B"), tooltip = "This is helpful information"))
     Output
       <div id="with_tooltip" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="with_tooltip-label" class="control-label" for="with_tooltip">
+        <label id="with_tooltip--label" class="control-label" for="with_tooltip--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1"></span>
           <span class="bslib-toolbar-label visually-hidden">With tooltip</span>
         </label>
         <bslib-tooltip id="with_tooltip_tooltip" placement="bottom" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
           <template>This is helpful information</template>
-          <select id="with_tooltip" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
+          <select id="with_tooltip--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
       <option value="B">B</option></select>
         </bslib-tooltip>
       </div>
@@ -286,13 +286,13 @@
         choices = c("A", "B"), icon = shiny::icon("filter"), tooltip = FALSE))
     Output
       <div id="with_icon" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="with_icon-label" class="control-label" for="with_icon">
+        <label id="with_icon--label" class="control-label" for="with_icon--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1">
             <i class="fas fa-filter" role="presentation" aria-label="filter icon"></i>
           </span>
           <span class="bslib-toolbar-label visually-hidden">With icon</span>
         </label>
-        <select id="with_icon" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
+        <select id="with_icon--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
       <option value="B">B</option></select>
       </div>
 
@@ -303,15 +303,15 @@
         choices = c("A", "B"), icon = shiny::icon("star"), tooltip = "Select an option"))
     Output
       <div id="icon_tooltip" class="bslib-toolbar-input-select shiny-input-container">
-        <label id="icon_tooltip-label" class="control-label" for="icon_tooltip">
+        <label id="icon_tooltip--label" class="control-label" for="icon_tooltip--select">
           <span class="bslib-toolbar-icon" aria-hidden="true" style="pointer-events: none" role="none" tabindex="-1">
             <i class="far fa-star" role="presentation" aria-label="star icon"></i>
           </span>
           <span class="bslib-toolbar-label visually-hidden">Icon and tooltip</span>
         </label>
         <bslib-tooltip id="icon_tooltip_tooltip" placement="bottom" bsOptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
           <template>Select an option</template>
-          <select id="icon_tooltip" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
+          <select id="icon_tooltip--select" class="form-select form-select-sm" data-shiny-no-bind-input><option value="A" selected>A</option>
       <option value="B">B</option></select>
         </bslib-tooltip>
       </div>

tests/testthat/test-toolbar.R

@@ -295,13 +295,13 @@ test_that("toolbar_input_select() has proper label structure", {
   label_elem <- tagQuery(tis)$find("label")$selectedTags()[[1]]
   expect_true(!is.null(label_elem))
 
-  # Label should have id matching pattern "{id}-label"
+  # Label should have id matching pattern "{id}--label"
   label_id <- htmltools::tagGetAttribute(label_elem, "id")
-  expect_equal(label_id, "select-label")
+  expect_equal(label_id, "select--label")
 
   # Label should have for attribute pointing to select
   label_for <- htmltools::tagGetAttribute(label_elem, "for")
-  expect_equal(label_for, "select")
+  expect_equal(label_for, "select--select")
 
   # Find the label text span
   label_spans <- tagQuery(label_elem)$find(