@instructure/ui-drilldown 10.18.2-snapshot-1 → 10.18.2-snapshot-3

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.18.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-1) (2025-06-03)
+## [10.18.2-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-3) (2025-06-03)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* **many:** fix "not a valid selector" exception when an option ID contains quotes ([78e0b96](https://github.com/instructure/instructure-ui/commit/78e0b96edf29f3d476ba30b03134f1726bbdd0f4))
 
 
 

package/es/Drilldown/__new-tests__/Drilldown.test.js

@@ -95,6 +95,28 @@ describe('<Drilldown />', () => {
       expect(options.length).toBe(0);
       expect(notAllowedChild).not.toBeInTheDocument();
     });
+    it('should not crash for weird option ids', async () => {
+      const onSelect = vi.fn();
+      const weirdID = 'some"_weird!@#$%^&*()\\|`id';
+      render(_jsx(Drilldown, {
+        rootPageId: "page0",
+        onSelect: onSelect,
+        children: _jsx(Drilldown.Page, {
+          id: "page0",
+          children: data.map(option => _jsx(Drilldown.Option, {
+            id: weirdID + option.id,
+            value: weirdID + option.id,
+            "data-testid": weirdID + option.id,
+            children: option.label
+          }, weirdID + option.id))
+        })
+      }));
+      const option_1 = screen.getByTestId(weirdID + 'opt_1');
+      await userEvent.click(option_1);
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalled();
+      });
+    });
   });
   describe('id prop', () => {
     it('should put id attr on the drilldown', async () => {

package/es/Drilldown/index.js

@@ -259,7 +259,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       }
       if (event.type === 'keydown' && href) {
         var _this$_drilldownRef;
-        const optionEl = (_this$_drilldownRef = this._drilldownRef) === null || _this$_drilldownRef === void 0 ? void 0 : _this$_drilldownRef.querySelector(`#${id}`);
+        const optionEl = (_this$_drilldownRef = this._drilldownRef) === null || _this$_drilldownRef === void 0 ? void 0 : _this$_drilldownRef.querySelector(`#${CSS.escape(id)}`);
         const isLink = optionEl.tagName.toLowerCase() === 'a';
 
         // we need this check because in some cases
@@ -659,7 +659,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   focusOption(id) {
     const container = this._containerElement;
-    const optionElement = container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`);
+    const optionElement = container === null || container === void 0 ? void 0 : container.querySelector(`[id="${CSS.escape(id)}"]`);
     optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
   }
   handleGroupOptionSelected(event, selectedOption) {
@@ -1190,7 +1190,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         // Use action ID if exists, otherwise first non-action option's ID
         const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi2 = this.currentPage.children[0]) === null || _this$currentPage$chi2 === void 0 ? void 0 : _this$currentPage$chi2.props.id;
         if (!targetId) return null;
-        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${targetId}`);
+        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${CSS.escape(targetId)}`);
       },
       elementRef: element => {
         // setting ref for "Popover" version, the popover root

package/lib/Drilldown/__new-tests__/Drilldown.test.js

@@ -96,6 +96,28 @@ describe('<Drilldown />', () => {
       expect(options.length).toBe(0);
       expect(notAllowedChild).not.toBeInTheDocument();
     });
+    it('should not crash for weird option ids', async () => {
+      const onSelect = _vitest.vi.fn();
+      const weirdID = 'some"_weird!@#$%^&*()\\|`id';
+      (0, _react.render)((0, _jsxRuntime.jsx)(_index.Drilldown, {
+        rootPageId: "page0",
+        onSelect: onSelect,
+        children: (0, _jsxRuntime.jsx)(_index.Drilldown.Page, {
+          id: "page0",
+          children: data.map(option => (0, _jsxRuntime.jsx)(_index.Drilldown.Option, {
+            id: weirdID + option.id,
+            value: weirdID + option.id,
+            "data-testid": weirdID + option.id,
+            children: option.label
+          }, weirdID + option.id))
+        })
+      }));
+      const option_1 = _react.screen.getByTestId(weirdID + 'opt_1');
+      await _userEvent.default.click(option_1);
+      await (0, _react.waitFor)(() => {
+        expect(onSelect).toHaveBeenCalled();
+      });
+    });
   });
   describe('id prop', () => {
     it('should put id attr on the drilldown', async () => {

package/lib/Drilldown/index.js

@@ -268,7 +268,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       }
       if (event.type === 'keydown' && href) {
         var _this$_drilldownRef;
-        const optionEl = (_this$_drilldownRef = this._drilldownRef) === null || _this$_drilldownRef === void 0 ? void 0 : _this$_drilldownRef.querySelector(`#${id}`);
+        const optionEl = (_this$_drilldownRef = this._drilldownRef) === null || _this$_drilldownRef === void 0 ? void 0 : _this$_drilldownRef.querySelector(`#${CSS.escape(id)}`);
         const isLink = optionEl.tagName.toLowerCase() === 'a';
 
         // we need this check because in some cases
@@ -668,7 +668,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
   }
   focusOption(id) {
     const container = this._containerElement;
-    const optionElement = container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`);
+    const optionElement = container === null || container === void 0 ? void 0 : container.querySelector(`[id="${CSS.escape(id)}"]`);
     optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
   }
   handleGroupOptionSelected(event, selectedOption) {
@@ -1199,7 +1199,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         // Use action ID if exists, otherwise first non-action option's ID
         const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi2 = this.currentPage.children[0]) === null || _this$currentPage$chi2 === void 0 ? void 0 : _this$currentPage$chi2.props.id;
         if (!targetId) return null;
-        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${targetId}`);
+        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${CSS.escape(targetId)}`);
       },
       elementRef: element => {
         // setting ref for "Popover" version, the popover root

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.18.2-snapshot-1",
+  "version": "10.18.2-snapshot-3",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,29 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.18.2-snapshot-1",
-    "@instructure/emotion": "10.18.2-snapshot-1",
-    "@instructure/shared-types": "10.18.2-snapshot-1",
-    "@instructure/ui-dom-utils": "10.18.2-snapshot-1",
-    "@instructure/ui-icons": "10.18.2-snapshot-1",
-    "@instructure/ui-options": "10.18.2-snapshot-1",
-    "@instructure/ui-popover": "10.18.2-snapshot-1",
-    "@instructure/ui-position": "10.18.2-snapshot-1",
-    "@instructure/ui-prop-types": "10.18.2-snapshot-1",
-    "@instructure/ui-react-utils": "10.18.2-snapshot-1",
-    "@instructure/ui-selectable": "10.18.2-snapshot-1",
-    "@instructure/ui-testable": "10.18.2-snapshot-1",
-    "@instructure/ui-utils": "10.18.2-snapshot-1",
-    "@instructure/ui-view": "10.18.2-snapshot-1",
+    "@instructure/console": "10.18.2-snapshot-3",
+    "@instructure/emotion": "10.18.2-snapshot-3",
+    "@instructure/shared-types": "10.18.2-snapshot-3",
+    "@instructure/ui-dom-utils": "10.18.2-snapshot-3",
+    "@instructure/ui-icons": "10.18.2-snapshot-3",
+    "@instructure/ui-options": "10.18.2-snapshot-3",
+    "@instructure/ui-popover": "10.18.2-snapshot-3",
+    "@instructure/ui-position": "10.18.2-snapshot-3",
+    "@instructure/ui-prop-types": "10.18.2-snapshot-3",
+    "@instructure/ui-react-utils": "10.18.2-snapshot-3",
+    "@instructure/ui-selectable": "10.18.2-snapshot-3",
+    "@instructure/ui-testable": "10.18.2-snapshot-3",
+    "@instructure/ui-utils": "10.18.2-snapshot-3",
+    "@instructure/ui-view": "10.18.2-snapshot-3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.18.2-snapshot-1",
-    "@instructure/ui-babel-preset": "10.18.2-snapshot-1",
-    "@instructure/ui-color-utils": "10.18.2-snapshot-1",
-    "@instructure/ui-scripts": "10.18.2-snapshot-1",
-    "@instructure/ui-test-utils": "10.18.2-snapshot-1",
-    "@instructure/ui-themes": "10.18.2-snapshot-1",
+    "@instructure/ui-axe-check": "10.18.2-snapshot-3",
+    "@instructure/ui-babel-preset": "10.18.2-snapshot-3",
+    "@instructure/ui-color-utils": "10.18.2-snapshot-3",
+    "@instructure/ui-scripts": "10.18.2-snapshot-3",
+    "@instructure/ui-test-utils": "10.18.2-snapshot-3",
+    "@instructure/ui-themes": "10.18.2-snapshot-3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Drilldown/__new-tests__/Drilldown.test.tsx

@@ -104,6 +104,33 @@ describe('<Drilldown />', () => {
       expect(options.length).toBe(0)
       expect(notAllowedChild).not.toBeInTheDocument()
     })
+
+    it('should not crash for weird option ids', async () => {
+      const onSelect = vi.fn()
+      const weirdID = 'some"_weird!@#$%^&*()\\|`id'
+      render(
+        <Drilldown rootPageId="page0" onSelect={onSelect}>
+          <Drilldown.Page id="page0">
+            {data.map((option) => (
+              <Drilldown.Option
+                id={weirdID + option.id}
+                value={weirdID + option.id}
+                key={weirdID + option.id}
+                data-testid={weirdID + option.id}
+              >
+                {option.label}
+              </Drilldown.Option>
+            ))}
+          </Drilldown.Page>
+        </Drilldown>
+      )
+      const option_1 = screen.getByTestId(weirdID + 'opt_1')
+      await userEvent.click(option_1)
+
+      await waitFor(() => {
+        expect(onSelect).toHaveBeenCalled()
+      })
+    })
   })
 
   describe('id prop', () => {

package/src/Drilldown/index.tsx

@@ -585,9 +585,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
   focusOption(id: string) {
     const container = this._containerElement
-
     const optionElement = container?.querySelector(
-      `[id="${id}"]`
+      `[id="${CSS.escape(id)}"]`
     ) as HTMLSpanElement
 
     optionElement?.focus()
@@ -816,7 +815,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
     if (event.type === 'keydown' && href) {
       const optionEl = this._drilldownRef?.querySelector(
-        `#${id}`
+        `#${CSS.escape(id)}`
       ) as HTMLLinkElement
       const isLink = optionEl.tagName.toLowerCase() === 'a'
 
@@ -1516,7 +1515,9 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             : this.currentPage.children[0]?.props.id
 
           if (!targetId) return null
-          return this._popover?._contentElement?.querySelector(`#${targetId}`)
+          return this._popover?._contentElement?.querySelector(
+            `#${CSS.escape(targetId)}`
+          )
         }}
         elementRef={(element) => {
           // setting ref for "Popover" version, the popover root