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

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

@@ -18,7 +18,7 @@ var _IconDownloadSolid = require("@instructure/ui-icons/lib/IconDownloadSolid.js
 var _IconEyeSolid = require("@instructure/ui-icons/lib/IconEyeSolid.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _react3 = require("@emotion/react");
-var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
+var _Select$Option, _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
 /*
  * The MIT License (MIT)
  *
@@ -212,43 +212,67 @@ describe('<Select />', () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
+  it('should not crash for weird option ids', async () => {
+    const weirdID = 'some_`w@ei:r|!@#$%^&*(()|\\.l/d"id';
+    _vitest.vi.useFakeTimers();
+    const _render = (0, _react2.render)((0, _jsxRuntime.jsxs)(_index.default, {
+        renderLabel: "Choose an option",
+        scrollToHighlightedOption: true,
+        isShowingOptions: true,
+        children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
+          id: weirdID,
+          value: "2",
+          isHighlighted: true,
+          children: "op1"
+        }, "1"), _Select$Option || (_Select$Option = (0, _jsxRuntime.jsx)(_index.default.Option, {
+          id: "sdfsdfsd",
+          value: "2",
+          children: "op2"
+        }, "2"))]
+      })),
+      container = _render.container;
+    _vitest.vi.advanceTimersToNextFrame();
+    _vitest.vi.useRealTimers();
+    const input = container.querySelector('input');
+    expect(input).toBeInTheDocument();
+  });
   it('should have role button in Safari without onInputChange', async () => {
-    const _render = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+    const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
         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 = _vitest.vi.fn(() => false);
-    const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+    const _render3 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
         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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+    const _render4 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
         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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+    const _render5 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
         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 = _react2.screen.getByLabelText('Choose an option');
     const input = container.querySelector('input[id^="Select_"]');
@@ -341,20 +365,20 @@ describe('<Select />', () => {
   });
   describe('input', () => {
     it('should render with a generated id by default', () => {
-      const _render5 = (0, _react2.render)(_Select3 || (_Select3 = (0, _jsxRuntime.jsx)(_index.default, {
+      const _render6 = (0, _react2.render)(_Select3 || (_Select3 = (0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)(_Select4 || (_Select4 = (0, _jsxRuntime.jsx)(_index.default, {
+      const _render7 = (0, _react2.render)(_Select4 || (_Select4 = (0, _jsxRuntime.jsx)(_index.default, {
           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');
@@ -460,11 +484,11 @@ describe('<Select />', () => {
       expect(input).toHaveAttribute('data-custom-attr', 'true');
     });
     it('should allow override of autoComplete prop', () => {
-      const _render7 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render8 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           renderLabel: "Choose an option",
           children: getOptions()
         })),
-        rerender = _render7.rerender;
+        rerender = _render8.rerender;
       const input = _react2.screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('autocomplete', 'off');
       rerender((0, _jsxRuntime.jsx)(_index.default, {
@@ -487,170 +511,170 @@ describe('<Select />', () => {
       });
     });
     it("should not render option's before content in input field when isOptionContentAppliedToInput is set to false", async () => {
-      const _render8 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render9 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render10 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render11 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render12 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render13 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render14 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render15 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render16 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render17 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render18 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render19 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render20 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render21 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render22 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+      const _render23 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
           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');
     });
@@ -703,13 +727,13 @@ describe('<Select />', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render23 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+        const _render24 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
             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 = _react2.screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -735,12 +759,12 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render24 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+        const _render25 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions,
             children: getOptions()
           })),
-          rerender = _render24.rerender;
+          rerender = _render25.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
         await _userEvent.default.click(input);
         await (0, _react2.waitFor)(() => {
@@ -776,12 +800,12 @@ describe('<Select />', () => {
       });
       it('when space is pressed', async () => {
         const onRequestShowOptions = _vitest.vi.fn();
-        const _render25 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+        const _render26 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions,
             children: getOptions()
           })),
-          rerender = _render25.rerender;
+          rerender = _render26.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
         await _userEvent.default.type(input, '{space}');
         await (0, _react2.waitFor)(() => {
@@ -802,13 +826,13 @@ describe('<Select />', () => {
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
         const onRequestHideOptions = _vitest.vi.fn();
-        const _render26 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+        const _render27 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
             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 = _react2.screen.getByText('Choose an option');
         expect(icon).toBeInTheDocument();
@@ -839,13 +863,13 @@ describe('<Select />', () => {
       });
       it('when input is clicked', async () => {
         const onRequestHideOptions = _vitest.vi.fn();
-        const _render27 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
+        const _render28 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.default, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
             onRequestHideOptions: onRequestHideOptions,
             children: getOptions()
           })),
-          rerender = _render27.rerender;
+          rerender = _render28.rerender;
         const input = _react2.screen.getByLabelText('Choose an option');
         await _userEvent.default.click(input);
         await (0, _react2.waitFor)(() => {
@@ -935,8 +959,8 @@ describe('<Select />', () => {
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render28 = (0, _react2.render)(content),
-        container = _render28.container;
+      const _render29 = (0, _react2.render)(content),
+        container = _render29.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });

package/lib/Select/index.js

@@ -212,19 +212,18 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     return selectedOptionId;
   }
   scrollToOption(id) {
-    if (this._listView) {
-      const option = this._listView.querySelector(`[id="${id}"]`);
-      if (!option) return;
-      const listItem = option.parentNode;
-      const parentTop = (0, _getBoundingClientRect.getBoundingClientRect)(this._listView).top;
-      const elemTop = (0, _getBoundingClientRect.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 = (0, _getBoundingClientRect.getBoundingClientRect)(this._listView).top;
+    const elemTop = (0, _getBoundingClientRect.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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "10.18.2-snapshot-0",
+  "version": "10.18.2-snapshot-2",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,12 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.18.2-snapshot-0",
-    "@instructure/ui-babel-preset": "10.18.2-snapshot-0",
-    "@instructure/ui-color-utils": "10.18.2-snapshot-0",
-    "@instructure/ui-scripts": "10.18.2-snapshot-0",
-    "@instructure/ui-test-utils": "10.18.2-snapshot-0",
-    "@instructure/ui-themes": "10.18.2-snapshot-0",
+    "@instructure/ui-axe-check": "10.18.2-snapshot-2",
+    "@instructure/ui-babel-preset": "10.18.2-snapshot-2",
+    "@instructure/ui-color-utils": "10.18.2-snapshot-2",
+    "@instructure/ui-scripts": "10.18.2-snapshot-2",
+    "@instructure/ui-test-utils": "10.18.2-snapshot-2",
+    "@instructure/ui-themes": "10.18.2-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -36,22 +36,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.18.2-snapshot-0",
-    "@instructure/shared-types": "10.18.2-snapshot-0",
-    "@instructure/ui-dom-utils": "10.18.2-snapshot-0",
-    "@instructure/ui-form-field": "10.18.2-snapshot-0",
-    "@instructure/ui-icons": "10.18.2-snapshot-0",
-    "@instructure/ui-options": "10.18.2-snapshot-0",
-    "@instructure/ui-popover": "10.18.2-snapshot-0",
-    "@instructure/ui-position": "10.18.2-snapshot-0",
-    "@instructure/ui-prop-types": "10.18.2-snapshot-0",
-    "@instructure/ui-react-utils": "10.18.2-snapshot-0",
-    "@instructure/ui-selectable": "10.18.2-snapshot-0",
-    "@instructure/ui-testable": "10.18.2-snapshot-0",
-    "@instructure/ui-text-input": "10.18.2-snapshot-0",
-    "@instructure/ui-utils": "10.18.2-snapshot-0",
-    "@instructure/ui-view": "10.18.2-snapshot-0",
-    "@instructure/uid": "10.18.2-snapshot-0",
+    "@instructure/emotion": "10.18.2-snapshot-2",
+    "@instructure/shared-types": "10.18.2-snapshot-2",
+    "@instructure/ui-dom-utils": "10.18.2-snapshot-2",
+    "@instructure/ui-form-field": "10.18.2-snapshot-2",
+    "@instructure/ui-icons": "10.18.2-snapshot-2",
+    "@instructure/ui-options": "10.18.2-snapshot-2",
+    "@instructure/ui-popover": "10.18.2-snapshot-2",
+    "@instructure/ui-position": "10.18.2-snapshot-2",
+    "@instructure/ui-prop-types": "10.18.2-snapshot-2",
+    "@instructure/ui-react-utils": "10.18.2-snapshot-2",
+    "@instructure/ui-selectable": "10.18.2-snapshot-2",
+    "@instructure/ui-testable": "10.18.2-snapshot-2",
+    "@instructure/ui-text-input": "10.18.2-snapshot-2",
+    "@instructure/ui-utils": "10.18.2-snapshot-2",
+    "@instructure/ui-view": "10.18.2-snapshot-2",
+    "@instructure/uid": "10.18.2-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

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

@@ -316,6 +316,29 @@ describe('<Select />', () => {
     consoleErrorMock.mockRestore()
   })
 
+  it('should not crash for weird option ids', async () => {
+    const weirdID = 'some_`w@ei:r|!@#$%^&*(()|\\.l/d"id'
+    vi.useFakeTimers()
+    const { container } = render(
+      <Select
+        renderLabel="Choose an option"
+        scrollToHighlightedOption
+        isShowingOptions
+      >
+        <Select.Option id={weirdID} key="1" value="2" isHighlighted={true}>
+          op1
+        </Select.Option>
+        <Select.Option id="sdfsdfsd" key="2" value="2">
+          op2
+        </Select.Option>
+      </Select>
+    )
+    vi.advanceTimersToNextFrame()
+    vi.useRealTimers()
+    const input = container.querySelector('input')
+    expect(input).toBeInTheDocument()
+  })
+
   it('should have role button in Safari without onInputChange', async () => {
     const { container } = render(
       <Select renderLabel="Choose an option">{getOptions()}</Select>

package/src/Select/index.tsx

@@ -291,22 +291,21 @@ class Select extends Component<SelectProps> {
   }
 
   scrollToOption(id?: string) {
-    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 as Element).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 as Element).clientHeight : 0)
+
+    if (elemBottom > parentBottom) {
+      this._listView.scrollTop += elemBottom - parentBottom
+    } else if (elemTop < parentTop) {
+      this._listView.scrollTop -= parentTop - elemTop
     }
   }