@instructure/ui-select 10.18.2-snapshot-0 → 10.18.2-snapshot-2

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-0](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-0) (2025-06-02)
+## [10.18.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-2) (2025-06-03)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### 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/Select/__new-tests__/Select.test.js

@@ -1,4 +1,4 @@
-var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
+var _Select$Option, _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
 /*
  * The MIT License (MIT)
  *
@@ -207,43 +207,67 @@ describe('<Select />', () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
+  it('should not crash for weird option ids', async () => {
+    const weirdID = 'some_`w@ei:r|!@#$%^&*(()|\\.l/d"id';
+    vi.useFakeTimers();
+    const _render = render(_jsxs(Select, {
+        renderLabel: "Choose an option",
+        scrollToHighlightedOption: true,
+        isShowingOptions: true,
+        children: [_jsx(Select.Option, {
+          id: weirdID,
+          value: "2",
+          isHighlighted: true,
+          children: "op1"
+        }, "1"), _Select$Option || (_Select$Option = _jsx(Select.Option, {
+          id: "sdfsdfsd",
+          value: "2",
+          children: "op2"
+        }, "2"))]
+      })),
+      container = _render.container;
+    vi.advanceTimersToNextFrame();
+    vi.useRealTimers();
+    const input = container.querySelector('input');
+    expect(input).toBeInTheDocument();
+  });
   it('should have role button in Safari without onInputChange', async () => {
-    const _render = render(_jsx(Select, {
+    const _render2 = render(_jsx(Select, {
         renderLabel: "Choose an option",
         children: getOptions()
       })),
-      container = _render.container;
+      container = _render2.container;
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'button');
   });
   it('should have role combobox in different browsers than Safari without onInputChange', async () => {
     mockUtils.isSafari = vi.fn(() => false);
-    const _render2 = render(_jsx(Select, {
+    const _render3 = render(_jsx(Select, {
         renderLabel: "Choose an option",
         children: getOptions()
       })),
-      container = _render2.container;
+      container = _render3.container;
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
   it('should have role combobox with onInputChange', async () => {
-    const _render3 = render(_jsx(Select, {
+    const _render4 = render(_jsx(Select, {
         renderLabel: "Choose an option",
         onInputChange: () => {},
         children: getOptions()
       })),
-      container = _render3.container;
+      container = _render4.container;
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
   it('should render an input and a list', async () => {
-    const _render4 = render(_jsx(Select, {
+    const _render5 = render(_jsx(Select, {
         renderLabel: "Choose an option",
         isShowingOptions: true,
         "data-testid": "subidubi",
         children: getOptions()
       })),
-      container = _render4.container;
+      container = _render5.container;
     const select = container.querySelector('span[class$="-select"]');
     const label = screen.getByLabelText('Choose an option');
     const input = container.querySelector('input[id^="Select_"]');
@@ -336,20 +360,20 @@ describe('<Select />', () => {
   });
   describe('input', () => {
     it('should render with a generated id by default', () => {
-      const _render5 = render(_Select3 || (_Select3 = _jsx(Select, {
+      const _render6 = render(_Select3 || (_Select3 = _jsx(Select, {
           renderLabel: "Choose an option"
         }))),
-        container = _render5.container;
+        container = _render6.container;
       const input = container.querySelector('input[id^="Select_"]');
       expect(input).toBeInTheDocument();
       expect(input).toHaveAttribute('id', expect.stringContaining('Select_'));
     });
     it('should render with a custom id if given', () => {
-      const _render6 = render(_Select4 || (_Select4 = _jsx(Select, {
+      const _render7 = render(_Select4 || (_Select4 = _jsx(Select, {
           renderLabel: "Choose an option",
           id: "customSelect"
         }))),
-        container = _render6.container;
+        container = _render7.container;
       const input = container.querySelector('input[id^="customSelect"]');
       expect(input).toBeInTheDocument();
       expect(input.getAttribute('id')).toEqual('customSelect');
@@ -455,11 +479,11 @@ describe('<Select />', () => {
       expect(input).toHaveAttribute('data-custom-attr', 'true');
     });
     it('should allow override of autoComplete prop', () => {
-      const _render7 = render(_jsx(Select, {
+      const _render8 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           children: getOptions()
         })),
-        rerender = _render7.rerender;
+        rerender = _render8.rerender;
       const input = screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('autocomplete', 'off');
       rerender(_jsx(Select, {
@@ -482,170 +506,170 @@ describe('<Select />', () => {
       });
     });
     it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false", async () => {
-      const _render8 = render(_jsx(Select, {
+      const _render9 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: false,
           inputValue: optionsWithBeforeContent[0].label,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render8.container;
+        container = _render9.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).not.toHaveTextContent('XY');
     });
     it('should render arrow in input field when isOptionContentAppliedToInput is set to false', async () => {
-      const _render9 = render(_jsx(Select, {
+      const _render10 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: false,
           inputValue: optionsWithBeforeContent[0].label,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render9.container;
+        container = _render10.container;
       const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
       const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
       expect(svgElement).toBeInTheDocument();
     });
     it("should render option's before content in input field when isOptionContentAppliedToInput is set to true", async () => {
-      const _render10 = render(_jsx(Select, {
+      const _render11 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithBeforeContent[0].label,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render10.container;
+        container = _render11.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).toHaveTextContent('XY');
     });
     it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content', async () => {
-      const _render11 = render(_jsx(Select, {
+      const _render12 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithBeforeContent[0].label,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render11.container;
+        container = _render12.container;
       const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
       const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
       expect(svgElement).toBeInTheDocument();
     });
     it("should render option's after content in input field when isOptionContentAppliedToInput is set to true", async () => {
-      const _render12 = render(_jsx(Select, {
+      const _render13 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithAfterContent[0].label,
           children: getOptionsWithAfterContent('opt1')
         })),
-        container = _render12.container;
+        container = _render13.container;
       const beforeContent = container.querySelector('span[class$="-textInput__afterElement"]');
       expect(beforeContent).toHaveTextContent('XY');
     });
     it("should render option's before content in input field when isOptionContentAppliedToInput is set to true but renderBeforeInput is also set", async () => {
-      const _render13 = render(_jsx(Select, {
+      const _render14 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithBeforeContent[0].label,
           renderBeforeInput: "ZZ",
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render13.container;
+        container = _render14.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).toHaveTextContent('XY');
     });
     it("should render option's after content in input field when isOptionContentAppliedToInput is set to true but renderAfterInput is also set", async () => {
-      const _render14 = render(_jsx(Select, {
+      const _render15 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithAfterContent[0].label,
           renderAfterInput: "ZZ",
           children: getOptionsWithAfterContent('opt1')
         })),
-        container = _render14.container;
+        container = _render15.container;
       const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
       expect(afterContent).toHaveTextContent('XY');
     });
     it("should not render option's before content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
-      const _render15 = render(_jsx(Select, {
+      const _render16 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render15.container;
+        container = _render16.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).not.toHaveTextContent('XY');
     });
     it("should render option's before content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
-      const _render16 = render(_jsx(Select, {
+      const _render17 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithBeforeAndAfterContent[0].label,
           children: getOptionsWithBeforeAndAfterContent('opt1')
         })),
-        container = _render16.container;
+        container = _render17.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).toHaveTextContent('XY');
     });
     it("should render option's after content in input field when isOptionContentAppliedToInput is set to true and both optionBeforeContent and optionAfterContent are provided", async () => {
-      const _render17 = render(_jsx(Select, {
+      const _render18 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: optionsWithBeforeAndAfterContent[0].label,
           children: getOptionsWithBeforeAndAfterContent('opt1')
         })),
-        container = _render17.container;
+        container = _render18.container;
       const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
       expect(afterContent).toHaveTextContent('ZZ');
     });
     it('should render arrow in input field when isOptionContentAppliedToInput is set to true but inputValue is not set', async () => {
-      const _render18 = render(_jsx(Select, {
+      const _render19 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render18.container;
+        container = _render19.container;
       const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
       const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
       expect(svgElement).toBeInTheDocument();
     });
     it("should not render option's after content in input field when isOptionContentAppliedToInput is set to true but inputValue is not set", async () => {
-      const _render19 = render(_jsx(Select, {
+      const _render20 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           children: getOptionsWithBeforeContent('opt1')
         })),
-        container = _render19.container;
+        container = _render20.container;
       const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
       expect(afterContent).not.toHaveTextContent('XY');
     });
     it("should render option's before content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
-      const _render20 = render(_jsx(Select, {
+      const _render21 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: groupOptionsWithBeforeContent.Options1[0].label,
           children: getGroupOptionsWithBeforeContent('opt1')
         })),
-        container = _render20.container;
+        container = _render21.container;
       const beforeContent = container.querySelector('span[class$="-textInput__layout"]');
       expect(beforeContent).toHaveTextContent('XY');
     });
     it('should render arrow icon when isOptionContentAppliedToInput is set to true with before content and group options', async () => {
-      const _render21 = render(_jsx(Select, {
+      const _render22 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: groupOptionsWithBeforeContent.Options1[0].label,
           children: getGroupOptionsWithBeforeContent('opt1')
         })),
-        container = _render21.container;
+        container = _render22.container;
       const spanElement = container.querySelector('span[class$="-textInput__afterElement"]');
       const svgElement = spanElement.querySelector('svg[name="IconArrowOpenDown"]');
       expect(svgElement).toBeInTheDocument();
     });
     it("should render option's after content input field when isOptionContentAppliedToInput is set to true with group options", async () => {
-      const _render22 = render(_jsx(Select, {
+      const _render23 = render(_jsx(Select, {
           renderLabel: "Choose an option",
           isOptionContentAppliedToInput: true,
           inputValue: groupOptionsWithAfterContent.Options2[0].label,
           children: getGroupOptionsWithAfterContent('opt4')
         })),
-        container = _render22.container;
+        container = _render23.container;
       const afterContent = container.querySelector('span[class$="-textInput__afterElement"]');
       expect(afterContent).toHaveTextContent('AB');
     });
@@ -698,13 +722,13 @@ describe('<Select />', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render23 = render(_jsx(Select, {
+        const _render24 = render(_jsx(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions,
             children: getOptions()
           })),
-          container = _render23.container,
-          rerender = _render23.rerender;
+          container = _render24.container,
+          rerender = _render24.rerender;
         const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
         const label = screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -730,12 +754,12 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render24 = render(_jsx(Select, {
+        const _render25 = render(_jsx(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions,
             children: getOptions()
           })),
-          rerender = _render24.rerender;
+          rerender = _render25.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.click(input);
         await waitFor(() => {
@@ -771,12 +795,12 @@ describe('<Select />', () => {
       });
       it('when space is pressed', async () => {
         const onRequestShowOptions = vi.fn();
-        const _render25 = render(_jsx(Select, {
+        const _render26 = render(_jsx(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions,
             children: getOptions()
           })),
-          rerender = _render25.rerender;
+          rerender = _render26.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.type(input, '{space}');
         await waitFor(() => {
@@ -797,13 +821,13 @@ describe('<Select />', () => {
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
         const onRequestHideOptions = vi.fn();
-        const _render26 = render(_jsx(Select, {
+        const _render27 = render(_jsx(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
             onRequestHideOptions: onRequestHideOptions,
             children: getOptions()
           })),
-          container = _render26.container;
+          container = _render27.container;
         const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
         const label = screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -834,13 +858,13 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestHideOptions = vi.fn();
-        const _render27 = render(_jsx(Select, {
+        const _render28 = render(_jsx(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
             onRequestHideOptions: onRequestHideOptions,
             children: getOptions()
           })),
-          rerender = _render27.rerender;
+          rerender = _render28.rerender;
         const input = screen.getByLabelText('Choose an option');
         await userEvent.click(input);
         await waitFor(() => {
@@ -930,8 +954,8 @@ describe('<Select />', () => {
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render28 = render(content),
-        container = _render28.container;
+      const _render29 = render(content),
+        container = _render29.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/Select/index.js

@@ -200,19 +200,18 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     return selectedOptionId;
   }
   scrollToOption(id) {
-    if (this._listView) {
-      const option = this._listView.querySelector(`[id="${id}"]`);
-      if (!option) return;
-      const listItem = option.parentNode;
-      const parentTop = getBoundingClientRect(this._listView).top;
-      const elemTop = getBoundingClientRect(listItem).top;
-      const parentBottom = parentTop + this._listView.clientHeight;
-      const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
-      if (elemBottom > parentBottom) {
-        this._listView.scrollTop += elemBottom - parentBottom;
-      } else if (elemTop < parentTop) {
-        this._listView.scrollTop -= parentTop - elemTop;
-      }
+    if (!this._listView || !id) return;
+    const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
+    if (!option) return;
+    const listItem = option.parentNode;
+    const parentTop = getBoundingClientRect(this._listView).top;
+    const elemTop = getBoundingClientRect(listItem).top;
+    const parentBottom = parentTop + this._listView.clientHeight;
+    const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
+    if (elemBottom > parentBottom) {
+      this._listView.scrollTop += elemBottom - parentBottom;
+    } else if (elemTop < parentTop) {
+      this._listView.scrollTop -= parentTop - elemTop;
     }
   }
   highlightOption(event, id) {