diff --git a/packages/eui/changelogs/upcoming/9326.md b/packages/eui/changelogs/upcoming/9326.md
new file mode 100644
index 00000000000..b009c006841
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9326.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
index dc96c43e07f..a972c9289e5 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx
@@ -47,6 +47,16 @@ const selectableListRequiredProps = {
 };
 
 describe('EuiSelectableListItem', () => {
+  const scrollIntoViewMock = jest.fn();
+
+  beforeAll(() => {
+    global.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   shouldRenderCustomStyles(
     <EuiSelectableList options={options} {...selectableListRequiredProps} />
   );
@@ -267,6 +277,46 @@ describe('EuiSelectableListItem', () => {
           'block-size: 300px'
         );
       });
+
+      it('scrolls to active option with a colon in the id', () => {
+        // React's `useId` can add `:` symbols to the generated id
+        const makeOptionId = (index?: number) => `:r${index}:`;
+
+        const { container, rerender } = render(
+          <EuiSelectableList
+            activeOptionIndex={0}
+            options={options}
+            {...selectableListRequiredProps}
+            makeOptionId={makeOptionId}
+            isVirtualized={false}
+          />
+        );
+
+        expect(
+          container.querySelector(`[id="${makeOptionId(0)}"]`)
+        ).toBeInTheDocument();
+        expect(
+          container.querySelector(`[id="${makeOptionId(5)}"]`)
+        ).toBeInTheDocument();
+
+        rerender(
+          <EuiSelectableList
+            activeOptionIndex={5}
+            options={options}
+            {...selectableListRequiredProps}
+            makeOptionId={makeOptionId}
+            isVirtualized={false}
+          />
+        );
+
+        expect(
+          container.querySelector(`[id="${makeOptionId(0)}"]`)
+        ).toBeInTheDocument();
+        expect(
+          container.querySelector(`[id="${makeOptionId(5)}"]`)
+        ).toBeInTheDocument();
+        expect(scrollIntoViewMock).toHaveBeenCalled();
+      });
     });
 
     test('searchable enables correct screen reader instructions', () => {
diff --git a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
index 4b04b6e342c..b2c05a748d3 100644
--- a/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
+++ b/packages/eui/src/components/selectable/selectable_list/selectable_list.tsx
@@ -325,8 +325,10 @@ export class EuiSelectableList<T> extends Component<
         if (isVirtualized) {
           this.listRef?.scrollToItem(activeOptionIndex, 'auto');
         } else {
-          const activeOptionId = `#${makeOptionId(activeOptionIndex)}`;
-          const activeOptionEl = this.listBoxRef?.querySelector(activeOptionId);
+          const activeOptionId = makeOptionId(activeOptionIndex);
+          const activeOptionEl = this.listBoxRef?.querySelector(
+            `[id="${activeOptionId}"]`
+          );
           if (activeOptionEl) {
             // TODO: we can remove scrollIntoView's conditional chaining once jsdom stubs it
             // @see https://github.com/jsdom/jsdom/issues/1695