fix: Fix finding inputs with IDs containing spaces

inst/www/shared/shiny.js

@@ -5859,6 +5859,15 @@
       return val;
     return val.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
   }
+  function escapedIdSelector(val) {
+    val = $escape(val);
+    if (val.indexOf(" ") === -1)
+      return "#" + val;
+    console.warn("[shiny] Invalid ID, should not include spaces.", {
+      id: val
+    });
+    return '[id="'.concat(val, '"]');
+  }
   function mapValues(obj, f) {
     var newObj = {};
     Object.keys(obj).forEach(function(key) {
@@ -18328,7 +18337,8 @@
         });
         addMessageHandler("inputMessages", function(message) {
           for (var i = 0; i < message.length; i++) {
-            var $obj = (0, import_jquery38.default)(".shiny-bound-input#" + $escape(message[i].id));
+            var inputSelector = ".shiny-bound-input" + escapedIdSelector(message[i].id);
+            var $obj = (0, import_jquery38.default)(inputSelector);
             var inputBinding = $obj.data("shiny-input-binding");
             if ($obj.length > 0) {
               if (!$obj.attr("aria-live"))
@@ -18593,7 +18603,7 @@
           }
         });
         function getTabset(id) {
-          var $tabset = (0, import_jquery38.default)("#" + $escape(id));
+          var $tabset = (0, import_jquery38.default)(escapedIdSelector(id));
           if ($tabset.length === 0)
             throw "There is no tabsetPanel (or navbarPage or navlistPanel) with id equal to '" + id + "'";
           return $tabset;

srcts/src/shiny/shinyapp.ts

@@ -1,5 +1,11 @@
 import $ from "jquery";
-import { $escape, hasOwnProperty, randomId, scopeExprToFunc } from "../utils";
+import {
+  $escape,
+  escapedIdSelector,
+  hasOwnProperty,
+  randomId,
+  scopeExprToFunc,
+} from "../utils";
 import {
   getShinyCreateWebsocket,
   getShinyOnCustomMessage,
@@ -713,7 +719,9 @@ class ShinyApp {
       (message: Array<{ id: string; message: unknown }>) => {
         // inputMessages should be an array
         for (let i = 0; i < message.length; i++) {
-          const $obj = $(".shiny-bound-input#" + $escape(message[i].id));
+          const inputSelector =
+            ".shiny-bound-input" + escapedIdSelector(message[i].id);
+          const $obj = $(inputSelector);
           const inputBinding: InputBinding = $obj.data("shiny-input-binding");
 
           // Dispatch the message to the appropriate input object
@@ -940,7 +948,7 @@ class ShinyApp {
     });
 
     function getTabset(id: string) {
-      const $tabset = $("#" + $escape(id));
+      const $tabset = $(escapedIdSelector(id));
 
       if ($tabset.length === 0)
         throw (

srcts/src/utils/index.ts

@@ -237,6 +237,15 @@ function $escape(val: string | undefined): string | undefined {
   return val.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, "\\$1");
 }
 
+// Returns a selector for an ID, preferring the #id syntax but falling back to
+// [id="id"] if the ID contains spaces (with a warning).
+function escapedIdSelector(val: string): string {
+  val = $escape(val);
+  if (val.indexOf(" ") === -1) return "#" + val;
+  console.warn("[shiny] Invalid ID, should not include spaces.", { id: val });
+  return `[id="${val}"]`;
+}
+
 // Maps a function over an object, preserving keys. Like the mapValues
 // function from lodash.
 function mapValues<T extends { [key: string]: any }, R>(
@@ -401,6 +410,7 @@ export {
   asArray,
   mergeSort,
   $escape,
+  escapedIdSelector,
   mapValues,
   isnan,
   _equal,

srcts/types/src/utils/index.d.ts

@@ -15,6 +15,7 @@ declare function asArray<T>(value: T | T[] | null | undefined): T[];
 declare function mergeSort<Item>(list: Item[], sortfunc: (a: Item, b: Item) => boolean | number): Item[];
 declare function $escape(val: undefined): undefined;
 declare function $escape(val: string): string;
+declare function escapedIdSelector(val: string): string;
 declare function mapValues<T extends {
     [key: string]: any;
 }, R>(obj: T, f: (value: MapValuesUnion<T>, key: string, object: typeof obj) => R): MapWithResult<T, R>;
@@ -26,4 +27,4 @@ declare function updateLabel(labelTxt: string | undefined, labelNode: JQuery<HTM
 declare function getComputedLinkColor(el: HTMLElement): string;
 declare function isBS3(): boolean;
 declare function toLowerCase<T extends string>(str: T): Lowercase<T>;
-export { escapeHTML, randomId, strToBool, getStyle, padZeros, roundSignif, parseDate, formatDateUTC, makeResizeFilter, pixelRatio, scopeExprToFunc, asArray, mergeSort, $escape, mapValues, isnan, _equal, equal, compareVersion, updateLabel, getComputedLinkColor, hasOwnProperty, hasDefinedProperty, isBS3, toLowerCase, };
+export { escapeHTML, randomId, strToBool, getStyle, padZeros, roundSignif, parseDate, formatDateUTC, makeResizeFilter, pixelRatio, scopeExprToFunc, asArray, mergeSort, $escape, escapedIdSelector, mapValues, isnan, _equal, equal, compareVersion, updateLabel, getComputedLinkColor, hasOwnProperty, hasDefinedProperty, isBS3, toLowerCase, };