Finer-grained control over shiny-provided input bindings (#3861)

gadenbuie · cpsievert · jcheng5 · web-flow · commit 6be6dfbfebb0 · 2023-07-31T10:41:27.000-05:00
Co-authored-by: Carson Sievert &lt;cpsievert1@gmail.com&gt;
Co-authored-by: Joe Cheng &lt;joe@rstudio.com&gt;
Co-authored-by: gadenbuie &lt;gadenbuie@users.noreply.github.com&gt;
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,7 +1,7 @@
 Package: shiny
 Type: Package
 Title: Web Application Framework for R
-Version: 1.7.4.9002
+Version: 1.7.4.9003
 Authors@R: c(
     person("Winston", "Chang", role = c("aut", "cre"), email = "winston@rstudio.com", comment = c(ORCID = "0000-0002-1576-2126")),
     person("Joe", "Cheng", role = "aut", email = "joe@rstudio.com"),
diff --git a/NEWS.md b/NEWS.md
@@ -14,6 +14,8 @@
 
 * Allow for `shiny:::toJSON()` to respect if `digits=` has class `"AsIs"` which represents if `use_signif=` is `TRUE` or `FALSE`. This is useful for testing to keep the digits smaller. For example, setting `options(shiny.json.digits = 4)` will save 4 digits after the decimal, rather than the default of `I(16)` which will save 16 significant digits. (#3819)
 
+* Closed #2956: Component authors can now prevent Shiny from creating an input binding on specific elements by adding the `data-shiny-no-bind-input` attribute to the element. The attribute may have any or no value; its presence will prevent binding. This feature is primarily useful for input component authors who want to use standard HTML input elements without causing Shiny to create an input binding for them. Additionally, Shiny now adds custom classes to its inputs. For example, `checkboxInput()` now has a `shiny-input-checkbox` class. These custom classes may be utilized in future updates to Shiny's input binding logic. (#3861)
+
 ### Bug fixes
 
 * Fixed #3771: Sometimes the error `ion.rangeSlider.min.js: i.stopPropagation is not a function` would appear in the JavaScript console. (#3772)
diff --git a/R/input-checkbox.R b/R/input-checkbox.R
@@ -31,7 +31,7 @@ checkboxInput <- function(inputId, label, value = FALSE, width = NULL) {
 
   value <- restoreInput(id = inputId, default = value)
 
-  inputTag <- tags$input(id = inputId, type="checkbox")
+  inputTag <- tags$input(id = inputId, type="checkbox", class = "shiny-input-checkbox")
   if (!is.null(value) && value)
     inputTag$attribs$checked <- "checked"
 
diff --git a/R/input-file.R b/R/input-file.R
@@ -101,6 +101,7 @@ fileInput <- function(inputId, label, multiple = FALSE, accept = NULL,
 
   inputTag <- tags$input(
     id = inputId,
+    class = "shiny-input-file",
     name = inputId,
     type = "file",
     # Don't use "display: none;" style, which causes keyboard accessibility issue; instead use the following workaround: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/
diff --git a/R/input-numeric.R b/R/input-numeric.R
@@ -35,7 +35,7 @@ numericInput <- function(inputId, label, value, min = NA, max = NA, step = NA,
   value <- restoreInput(id = inputId, default = value)
 
   # build input tag
-  inputTag <- tags$input(id = inputId, type = "number", class="form-control",
+  inputTag <- tags$input(id = inputId, type = "number", class="shiny-input-number form-control",
                          value = formatNoSci(value))
   if (!is.na(min))
     inputTag$attribs$min = min
diff --git a/R/input-password.R b/R/input-password.R
@@ -35,7 +35,7 @@ passwordInput <- function(inputId, label, value = "", width = NULL,
   div(class = "form-group shiny-input-container",
     style = css(width = validateCssUnit(width)),
     shinyInputLabel(inputId, label),
-    tags$input(id = inputId, type="password", class="form-control", value=value,
+    tags$input(id = inputId, type="password", class="shiny-input-password form-control", value=value,
                placeholder = placeholder)
   )
 }
diff --git a/R/input-select.R b/R/input-select.R
@@ -106,6 +106,7 @@ selectInput <- function(inputId, label, choices, selected = NULL,
   # create select tag and add options
   selectTag <- tags$select(
     id = inputId,
+    class = "shiny-input-select",
     class = if (!selectize) "form-control",
     size = size,
     selectOptions(choices, selected, inputId, selectize)
diff --git a/R/input-text.R b/R/input-text.R
@@ -42,7 +42,7 @@ textInput <- function(inputId, label, value = "", width = NULL,
   div(class = "form-group shiny-input-container",
     style = css(width = validateCssUnit(width)),
     shinyInputLabel(inputId, label),
-    tags$input(id = inputId, type="text", class="form-control", value=value,
+    tags$input(id = inputId, type="text", class="shiny-input-text form-control", value=value,
       placeholder = placeholder)
   )
 }
diff --git a/R/input-textarea.R b/R/input-textarea.R
@@ -62,7 +62,7 @@ textAreaInput <- function(inputId, label, value = "", width = NULL, height = NUL
     style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
     tags$textarea(
       id = inputId,
-      class = "form-control",
+      class = "shiny-input-textarea form-control",
       placeholder = placeholder,
       style = style,
       rows = rows,
diff --git a/inst/www/shared/shiny-autoreload.js b/inst/www/shared/shiny-autoreload.js
diff --git a/inst/www/shared/shiny-showcase.css b/inst/www/shared/shiny-showcase.css
diff --git a/inst/www/shared/shiny-showcase.js b/inst/www/shared/shiny-showcase.js
diff --git a/inst/www/shared/shiny-testmode.js b/inst/www/shared/shiny-testmode.js
diff --git a/inst/www/shared/shiny.js b/inst/www/shared/shiny.js
@@ -1,4 +1,4 @@
-/*! shiny 1.7.4.9002 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
+/*! shiny 1.7.4.9003 | (c) 2012-2023 RStudio, PBC. | License: GPL-3 | file LICENSE */
 "use strict";
 (function() {
   var __create = Object.create;
@@ -16568,6 +16568,8 @@
       var matches = binding.find(scope) || [];
       var _loop22 = function _loop23() {
         var el = matches[j];
+        if (el.hasAttribute("data-shiny-no-bind-input"))
+          return "continue";
         var id = binding.getId(el);
         if (!id || boundInputs[id])
           return "continue";
@@ -19194,7 +19196,7 @@
   var windowShiny2;
   function setShiny(windowShiny_) {
     windowShiny2 = windowShiny_;
-    windowShiny2.version = "1.7.4.9002";
+    windowShiny2.version = "1.7.4.9003";
     var _initInputBindings = initInputBindings(), inputBindings = _initInputBindings.inputBindings, fileInputBinding2 = _initInputBindings.fileInputBinding;
     var _initOutputBindings = initOutputBindings(), outputBindings = _initOutputBindings.outputBindings;
     setFileInputBinding(fileInputBinding2);
diff --git a/inst/www/shared/shiny.js.map b/inst/www/shared/shiny.js.map
diff --git a/inst/www/shared/shiny.min.css b/inst/www/shared/shiny.min.css
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/package.json b/package.json
@@ -3,7 +3,7 @@
   "homepage": "https://shiny.rstudio.com",
   "repository": "github:rstudio/shiny",
   "name": "@types/rstudio-shiny",
-  "version": "1.7.4-alpha.9002",
+  "version": "1.7.4-alpha.9003",
   "license": "GPL-3.0-only",
   "main": "",
   "browser": "",
diff --git a/srcts/src/bindings/input/checkbox.ts b/srcts/src/bindings/input/checkbox.ts
@@ -9,6 +9,7 @@ type CheckboxReceiveMessageData = { value?: CheckboxChecked; label?: string };
 
 class CheckboxInputBinding extends InputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs also have .shiny-input-checkbox class
     return $(scope).find('input[type="checkbox"]');
   }
   getValue(el: CheckedHTMLElement): CheckboxChecked {
diff --git a/srcts/src/bindings/input/fileinput.ts b/srcts/src/bindings/input/fileinput.ts
@@ -195,6 +195,7 @@ function fileInputBindingGetId(this: any, el: HTMLInputElement): string {
 
 class FileInputBinding extends InputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs also have .shiny-input-file class
     return $(scope).find('input[type="file"]');
   }
   getId(el: HTMLInputElement): string {
diff --git a/srcts/src/bindings/input/number.ts b/srcts/src/bindings/input/number.ts
@@ -20,6 +20,7 @@ function getLabelNode(el: NumberHTMLElement): JQuery<HTMLElement> {
 
 class NumberInputBinding extends TextInputBindingBase {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs also have .shiny-input-number class
     return $(scope).find('input[type="number"]');
   }
 
diff --git a/srcts/src/bindings/input/password.ts b/srcts/src/bindings/input/password.ts
@@ -4,6 +4,7 @@ import { TextInputBinding } from "./text";
 
 class PasswordInputBinding extends TextInputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs also have .shiny-input-password class
     return $(scope).find('input[type="password"]');
   }
 
diff --git a/srcts/src/bindings/input/selectInput.ts b/srcts/src/bindings/input/selectInput.ts
@@ -42,6 +42,7 @@ function isSelectize(el: HTMLElement): boolean {
 
 class SelectInputBinding extends InputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs also have .shiny-input-select class
     return $(scope).find("select");
   }
   getType(el: HTMLElement): string | null {
diff --git a/srcts/src/bindings/input/text.ts b/srcts/src/bindings/input/text.ts
@@ -29,7 +29,8 @@ class TextInputBindingBase extends InputBinding {
     // id that ends in '-selectized'. The .not() selector below
     // is to prevent textInputBinding from accidentally picking up
     // this hidden element as a shiny input (#2396)
-
+    //
+    // Inputs also now have .shiny-input-text class
     return $inputs.not('input[type="text"][id$="-selectized"]');
   }
 
diff --git a/srcts/src/bindings/input/textarea.ts b/srcts/src/bindings/input/textarea.ts
@@ -4,6 +4,7 @@ import { TextInputBinding } from "./text";
 
 class TextareaInputBinding extends TextInputBinding {
   find(scope: HTMLElement): JQuery<HTMLElement> {
+    // Inputs now also have the .shiny-input-textarea class
     return $(scope).find("textarea");
   }
 }
diff --git a/srcts/src/shiny/bind.ts b/srcts/src/shiny/bind.ts
@@ -82,6 +82,7 @@ function bindInputs(
 
     for (let j = 0; j < matches.length; j++) {
       const el = matches[j];
+      if (el.hasAttribute("data-shiny-no-bind-input")) continue;
       const id = binding.getId(el);
 
       // Check if ID is falsy, or if already bound
diff --git a/tests/testthat/test-bootstrap.r b/tests/testthat/test-bootstrap.r
@@ -22,7 +22,7 @@ test_that("Repeated names for selectInput and radioButtons choices", {
   # Select input
   x <- selectInput('id','label', choices = c(a='x1', a='x2', b='x3'), selectize = FALSE)
   expect_true(grepl(fixed = TRUE,
-    '<select id="id" class="form-control"><option value="x1" selected>a</option>\n<option value="x2">a</option>\n<option value="x3">b</option></select>',
+    '<select class="shiny-input-select form-control" id="id"><option value="x1" selected>a</option>\n<option value="x2">a</option>\n<option value="x3">b</option></select>',
      format(x)
   ))
 
@@ -249,7 +249,7 @@ test_that("selectInput selects items by default", {
 
   # Nothing selected when choices=NULL
   expect_true(grepl(fixed = TRUE,
-    '<select id="x" class="form-control"></select>',
+    '<select class="shiny-input-select form-control" id="x"></select>',
     format(selectInput('x', NULL, NULL, selectize = FALSE))
   ))
 

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ passwordInput <- function(inputId, label, value = "", width = NULL,`
`35`	`35`	`div(class = "form-group shiny-input-container",`
`36`	`36`	`style = css(width = validateCssUnit(width)),`
`37`	`37`	`shinyInputLabel(inputId, label),`
`38`		`- tags$input(id = inputId, type="password", class="form-control", value=value,`
	`38`	`+ tags$input(id = inputId, type="password", class="shiny-input-password form-control", value=value,`
`39`	`39`	`placeholder = placeholder)`
`40`	`40`	`)`
`41`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ textInput <- function(inputId, label, value = "", width = NULL,`
`42`	`42`	`div(class = "form-group shiny-input-container",`
`43`	`43`	`style = css(width = validateCssUnit(width)),`
`44`	`44`	`shinyInputLabel(inputId, label),`
`45`		`- tags$input(id = inputId, type="text", class="form-control", value=value,`
	`45`	`+ tags$input(id = inputId, type="text", class="shiny-input-text form-control", value=value,`
`46`	`46`	`placeholder = placeholder)`
`47`	`47`	`)`
`48`	`48`	`}`