From 65e6c5290844c0f321b62dc13ed16b95ec720c01 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Mon, 27 Jul 2026 22:51:58 +0200
Subject: [PATCH 01/12] refactor(Select): you might not need an effect

---
 .../Select/common/InternalSelect.tsx          | 156 ++++++++----------
 1 file changed, 71 insertions(+), 85 deletions(-)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 4a9e823d8..6822e5900 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -8,7 +8,6 @@ import {
   forwardRef,
   isValidElement,
   useCallback,
-  useEffect,
   useId,
   useMemo,
   useRef,
@@ -20,7 +19,6 @@ import {
   SelectGroupProps,
   SelectItemObject,
   SelectItemProps,
-  SelectOptionListItem,
 } from './types';
 import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';
 import { Portal } from '@radix-ui/react-popover';
@@ -230,8 +228,7 @@ export const InternalSelect = ({
   const visibleList = useRef<string[]>([]);
   const navigatable = useRef<string[]>([]);
   const valueNode = useRef<Map<string, SelectItemProps>>(new Map());
-  const [isInitialized, setInitialized] = useState(false);
-  const [list, setList] = useState<SelectItemObject[]>([]);
+
   const updateElements = useCallback(
     ({ disabled, value, title, heading, nodeProps }: CallbackProps) => {
       if (title.includes(search) || heading?.includes(search)) {
@@ -244,6 +241,53 @@ export const InternalSelect = ({
     },
     [search]
   );
+
+  const list = useMemo<SelectItemObject[]>(() => {
+    const lowerCasedSearch = search.toLowerCase();
+
+    if (options) {
+      return options.flatMap(option => {
+        if ('options' in option) {
+          const heading = getTextFromNodes(option.heading).toLowerCase();
+          return (option.options ?? []).map(item => {
+            valueNode.current.set(item.value, item);
+            const title = getTextFromNodes(item.label).toLowerCase();
+            if (title.includes(lowerCasedSearch) || heading?.includes(lowerCasedSearch)) {
+              visibleList.current.push(item.value);
+              if (!disabled) {
+                navigatable.current.push(item.value);
+              }
+            }
+            return {
+              heading,
+              disabled: item.disabled,
+              value: item.value,
+              title,
+            };
+          });
+        } else {
+          valueNode.current.set(option.value, option);
+          const title = getTextFromNodes(option.label).toLowerCase();
+          if (title.includes(lowerCasedSearch)) {
+            visibleList.current.push(option.value);
+            if (!disabled) {
+              navigatable.current.push(option.value);
+            }
+          }
+          return {
+            disabled: option.disabled,
+            value: option.value,
+            title: getTextFromNodes(option.label),
+          };
+        }
+      });
+    } else if (children) {
+      return childrenToComboboxItemArray(children, updateElements);
+    }
+
+    return [];
+  }, [children, disabled, options, search, updateElements]);
+
   const onUpdateSearch = useCallback(
     (search: string) => {
       setSearch(search);
@@ -274,62 +318,6 @@ export const InternalSelect = ({
     [highlighted, list]
   );
 
-  const updateList = useCallback(
-    (children?: ReactNode, options?: SelectOptionListItem[]) => {
-      const lowerCasedSearch = search.toLowerCase();
-      if (options) {
-        setList(
-          options.flatMap(option => {
-            if ('options' in option) {
-              const heading = getTextFromNodes(option.heading).toLowerCase();
-              return (option.options ?? []).map(item => {
-                valueNode.current.set(item.value, item);
-                const title = getTextFromNodes(item.label).toLowerCase();
-                if (
-                  title.includes(lowerCasedSearch) ||
-                  heading?.includes(lowerCasedSearch)
-                ) {
-                  visibleList.current.push(item.value);
-                  if (!disabled) {
-                    navigatable.current.push(item.value);
-                  }
-                }
-                return {
-                  heading,
-                  disabled: item.disabled,
-                  value: item.value,
-                  title,
-                };
-              });
-            } else {
-              valueNode.current.set(option.value, option);
-              const title = getTextFromNodes(option.label).toLowerCase();
-              if (title.includes(lowerCasedSearch)) {
-                visibleList.current.push(option.value);
-                if (!disabled) {
-                  navigatable.current.push(option.value);
-                }
-              }
-              return {
-                disabled: option.disabled,
-                value: option.value,
-                title: getTextFromNodes(option.label),
-              };
-            }
-          })
-        );
-      } else if (children) {
-        setList(childrenToComboboxItemArray(children, updateElements));
-      }
-    },
-    [disabled, search, updateElements]
-  );
-
-  useEffect(() => {
-    updateList(children, options);
-    setInitialized(true);
-  }, [children, options, updateList]);
-
   const inputRef = useRef<HTMLInputElement>(null);
   const inputModalityProps = useInputModality();
   const portalContainer = useResolvedPortalContainer(container);
@@ -427,31 +415,29 @@ export const InternalSelect = ({
             data-testid="select-trigger"
             {...triggerProps}
           >
-            {isInitialized && (
-              <SelectValue>
-                {selectedValues.length === 0 ? (
-                  placeholder
-                ) : multiple ? (
-                  <MultiSelectValue
-                    disabled={disabled ?? false}
-                    onSelect={onSelect}
-                    selectedValues={selectedValues}
-                    sortable={!disabled && sortable}
-                    valueNode={valueNode.current}
-                    onChange={onChange}
-                  />
-                ) : (
-                  <SingleSelectValue
-                    valueNode={
-                      checkbox && selectLabel
-                        ? { label: selectLabel as string, value: selectLabel as string }
-                        : valueNode.current.get(selectedValues[0])
-                    }
-                    value={selectedValues[0]}
-                  />
-                )}
-              </SelectValue>
-            )}
+            <SelectValue>
+              {selectedValues.length === 0 ? (
+                placeholder
+              ) : multiple ? (
+                <MultiSelectValue
+                  disabled={disabled ?? false}
+                  onSelect={onSelect}
+                  selectedValues={selectedValues}
+                  sortable={!disabled && sortable}
+                  valueNode={valueNode.current}
+                  onChange={onChange}
+                />
+              ) : (
+                <SingleSelectValue
+                  valueNode={
+                    checkbox && selectLabel
+                      ? { label: selectLabel as string, value: selectLabel as string }
+                      : valueNode.current.get(selectedValues[0])
+                  }
+                  value={selectedValues[0]}
+                />
+              )}
+            </SelectValue>
             <Icon
               name="sort"
               size="sm"

From 4d09d490ea6684b2c84dff0e0de9adfe66941feb Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Mon, 27 Jul 2026 22:52:24 +0200
Subject: [PATCH 02/12] refactor(Select): better naming for internal vars

---
 src/components/Select/common/InternalSelect.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 6822e5900..0251ea73a 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -242,7 +242,7 @@ export const InternalSelect = ({
     [search]
   );
 
-  const list = useMemo<SelectItemObject[]>(() => {
+  const normalizedOptions = useMemo<SelectItemObject[]>(() => {
     const lowerCasedSearch = search.toLowerCase();
 
     if (options) {
@@ -295,7 +295,7 @@ export const InternalSelect = ({
       const visibleItemsList: string[] = [];
       const navigatableList: string[] = [];
       const searchLowerCase = search.toLowerCase();
-      list.forEach(item => {
+      normalizedOptions.forEach(item => {
         if (
           item.title.includes(searchLowerCase) ||
           item.heading?.includes(searchLowerCase)
@@ -315,7 +315,7 @@ export const InternalSelect = ({
         setHighlighted(navigatableList[0] ?? null);
       }
     },
-    [highlighted, list]
+    [highlighted, normalizedOptions]
   );
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -451,7 +451,7 @@ export const InternalSelect = ({
               value={selectedValues}
               onChange={() => null}
             >
-              {list.map(item => (
+              {normalizedOptions.map(item => (
                 <option
                   key={item.value}
                   value={item.value}

From dfac3ac02fea7f79e00b740efb01cf89b161d866 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Mon, 27 Jul 2026 22:53:29 +0200
Subject: [PATCH 03/12] fix(Select): prevent keyboard selection of disabled
 options

---
 src/components/Select/common/InternalSelect.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 0251ea73a..6da616bec 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -254,7 +254,7 @@ export const InternalSelect = ({
             const title = getTextFromNodes(item.label).toLowerCase();
             if (title.includes(lowerCasedSearch) || heading?.includes(lowerCasedSearch)) {
               visibleList.current.push(item.value);
-              if (!disabled) {
+              if (!item.disabled) {
                 navigatable.current.push(item.value);
               }
             }
@@ -270,7 +270,7 @@ export const InternalSelect = ({
           const title = getTextFromNodes(option.label).toLowerCase();
           if (title.includes(lowerCasedSearch)) {
             visibleList.current.push(option.value);
-            if (!disabled) {
+            if (!option.disabled) {
               navigatable.current.push(option.value);
             }
           }
@@ -286,7 +286,7 @@ export const InternalSelect = ({
     }
 
     return [];
-  }, [children, disabled, options, search, updateElements]);
+  }, [children, options, search, updateElements]);
 
   const onUpdateSearch = useCallback(
     (search: string) => {

From 9228141e57150368a017849dce7cb2d0e783642b Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 00:42:33 +0200
Subject: [PATCH 04/12] fix(Select): match search against rendered DOM text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Search matched a statically-extracted approximation of each item's text
(getTextFromNodes walking the React tree), so any item whose visible text
wasn't a plain string child was invisible to search and got filtered out:
text rendered by a child component, the `label` prop, and numeric children.
Now search matches the text the browser actually rendered, read from the
DOM — like a native <select>.

Also fixes two issues uncovered along the way:
- Disabled options (options API) were keyboard-navigable: the initial
  navigable set was built from the component's `disabled` prop instead of
  the per-item `disabled`, so arrow keys could land on a disabled row.
- The trigger rendered empty on first paint / SSR because the selected
  value and placeholder were gated behind an `isInitialized` flag flipped
  only in a post-mount effect.

Technical shape: split the old `list` (useState + useEffect) into
`normalizedOptions` (memo; value + disabled; feeds the hidden native
<select> and the trigger's valueNode) and a `searchSource` state map read
from the DOM by a callback ref on the list container. The ref runs once the
list node commits (robust to Radix mounting the popover a commit later) and
re-attaches when the option set changes, so async-loaded options stay
searchable. Visibility, navigability, and the effective highlight are
derived from search + normalizedOptions + searchSource, removing
onUpdateSearch, the rebuild effect, onOpenAutoFocus, and the isInitialized/
visibleList/navigatable state. Group heading text is captured too, via
cui-select-group markers.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/Select.search.test.tsx  | 253 +++++++++++++++++
 .../Select/common/InternalSelect.tsx          | 255 ++++++++----------
 2 files changed, 364 insertions(+), 144 deletions(-)
 create mode 100644 src/components/Select/Select.search.test.tsx

diff --git a/src/components/Select/Select.search.test.tsx b/src/components/Select/Select.search.test.tsx
new file mode 100644
index 000000000..b395b1f4c
--- /dev/null
+++ b/src/components/Select/Select.search.test.tsx
@@ -0,0 +1,253 @@
+import { fireEvent } from '@testing-library/react';
+import { ReactNode } from 'react';
+import { Select } from '@/components/Select';
+import { renderCUI } from '@/utils/test-utils';
+
+/**
+ * Search must match what the user actually sees. The text is read from the
+ * rendered DOM, so it works regardless of how an item produces its text — a
+ * child component, a number, or the `label` prop — none of which a static walk
+ * of the React tree could recover.
+ */
+
+// A row whose visible text comes from a prop, not from string children.
+const ServiceRow = ({ name }: { name: string }) => <span>{name}</span>;
+
+const open = (getByTestId: (id: string) => HTMLElement) =>
+  fireEvent.click(getByTestId('select-trigger'));
+
+const type = (getByTestId: (id: string) => HTMLElement, query: string) =>
+  fireEvent.change(getByTestId('select-search-input'), { target: { value: query } });
+
+const renderChildren = (children: ReactNode) =>
+  renderCUI(
+    <Select
+      label="s"
+      showSearch
+    >
+      {children}
+    </Select>
+  );
+
+describe('InternalSelect search', () => {
+  beforeAll(() => {
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
+    }));
+  });
+
+  describe('children API', () => {
+    it('matches plain string children', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Item value="a">Apple</Select.Item>
+          <Select.Item value="b">Banana</Select.Item>
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, 'ban');
+      expect(queryByText('Banana')).not.toBeNull();
+      expect(queryByText('Apple')).toBeNull();
+    });
+
+    it('matches text supplied via the `label` prop', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Item
+            value="a"
+            label="Apple"
+          />
+          <Select.Item
+            value="b"
+            label="Banana"
+          />
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, 'ban');
+      expect(queryByText('Banana')).not.toBeNull();
+      expect(queryByText('Apple')).toBeNull();
+    });
+
+    it('matches numeric children', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Item value="a">{2024}</Select.Item>
+          <Select.Item value="b">{2025}</Select.Item>
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, '2025');
+      expect(queryByText('2025')).not.toBeNull();
+      expect(queryByText('2024')).toBeNull();
+    });
+
+    it('matches text rendered by a custom child component (the reported case)', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Item value="a">
+            <ServiceRow name="Analytics" />
+          </Select.Item>
+          <Select.Item value="b">
+            <ServiceRow name="Billing" />
+          </Select.Item>
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, 'bill');
+      expect(queryByText('Billing')).not.toBeNull();
+      expect(queryByText('Analytics')).toBeNull();
+    });
+
+    it('restores every item when the search is cleared', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Item value="a">
+            <ServiceRow name="Analytics" />
+          </Select.Item>
+          <Select.Item value="b">
+            <ServiceRow name="Billing" />
+          </Select.Item>
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, 'bill');
+      expect(queryByText('Analytics')).toBeNull();
+      type(getByTestId, '');
+      expect(queryByText('Analytics')).not.toBeNull();
+      expect(queryByText('Billing')).not.toBeNull();
+    });
+  });
+
+  describe('options API', () => {
+    it('matches a label rendered by a custom component', () => {
+      const { getByTestId, queryByText } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          options={[
+            { value: 'a', label: <ServiceRow name="Analytics" /> },
+            { value: 'b', label: <ServiceRow name="Billing" /> },
+          ]}
+        />
+      );
+      open(getByTestId);
+      type(getByTestId, 'bill');
+      expect(queryByText('Billing')).not.toBeNull();
+      expect(queryByText('Analytics')).toBeNull();
+    });
+
+    it('makes options added while open searchable without reopening', () => {
+      const { getByTestId, queryByText, rerender } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          options={[{ value: 'a', label: 'Apple' }]}
+        />
+      );
+      open(getByTestId);
+      rerender(
+        <Select
+          label="s"
+          showSearch
+          options={[
+            { value: 'a', label: 'Apple' },
+            { value: 'b', label: 'Banana' },
+          ]}
+        />
+      );
+      type(getByTestId, 'ban');
+      expect(queryByText('Banana')).not.toBeNull();
+    });
+  });
+
+  describe('group heading', () => {
+    it('reveals a group’s items when the search matches its heading', () => {
+      const { getByTestId, queryByText } = renderChildren(
+        <>
+          <Select.Group heading="Fruits">
+            <Select.Item value="a">Apple</Select.Item>
+            <Select.Item value="b">Banana</Select.Item>
+          </Select.Group>
+          <Select.Group heading="Vegetables">
+            <Select.Item value="c">Carrot</Select.Item>
+          </Select.Group>
+        </>
+      );
+      open(getByTestId);
+      type(getByTestId, 'fruit');
+      expect(queryByText('Apple')).not.toBeNull();
+      expect(queryByText('Banana')).not.toBeNull();
+      expect(queryByText('Carrot')).toBeNull();
+    });
+  });
+
+  describe('keyboard navigation seed', () => {
+    it('highlights the first item on open and selects it with Enter', () => {
+      const onSelect = vi.fn();
+      const { getByTestId } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          onSelect={onSelect}
+        >
+          <Select.Item value="a">Apple</Select.Item>
+          <Select.Item value="b">Banana</Select.Item>
+          <Select.Item value="c">Cherry</Select.Item>
+        </Select>
+      );
+      open(getByTestId);
+      const input = getByTestId('select-search-input');
+      // seed highlights "a"; one ArrowDown moves to "b"
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(onSelect).toHaveBeenCalledWith('b', undefined, expect.anything());
+    });
+
+    it('skips disabled options while navigating (options API)', () => {
+      const onSelect = vi.fn();
+      const { getByTestId } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          onSelect={onSelect}
+          options={[
+            { value: 'a', label: 'Apple' },
+            { value: 'b', label: 'Banana', disabled: true },
+            { value: 'c', label: 'Cherry' },
+          ]}
+        />
+      );
+      open(getByTestId);
+      const input = getByTestId('select-search-input');
+      // from the seeded "a", one ArrowDown must skip the disabled "b" to reach "c"
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(onSelect).toHaveBeenCalledWith('c', undefined, expect.anything());
+    });
+
+    it('Enter selects a visible match after the prior highlight is filtered out', () => {
+      const onSelect = vi.fn();
+      const { getByTestId } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          onSelect={onSelect}
+        >
+          <Select.Item value="a">Apple</Select.Item>
+          <Select.Item value="b">Banana</Select.Item>
+          <Select.Item value="c">Cherry</Select.Item>
+        </Select>
+      );
+      open(getByTestId);
+      const input = getByTestId('select-search-input');
+      fireEvent.keyDown(input, { key: 'ArrowDown' }); // highlight "b"
+      fireEvent.change(input, { target: { value: 'cher' } }); // "b" no longer visible
+      fireEvent.keyDown(input, { key: 'Enter' });
+      expect(onSelect).toHaveBeenCalledWith('c', undefined, expect.anything());
+    });
+  });
+});
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 6da616bec..b6ca51c6b 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -17,7 +17,6 @@ import {
   NoAvailableOptionsFactoryProps,
   SelectContainerProps,
   SelectGroupProps,
-  SelectItemObject,
   SelectItemProps,
 } from './types';
 import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';
@@ -58,13 +57,22 @@ import { GenericMenuItem } from '@/components/GenericMenu';
 import { IconWrapper } from '@/components/IconWrapper';
 import { useInputModality } from '@/hooks/internal';
 import { cn } from '@/lib/cva';
-import { getTextFromNodes } from '@/lib/getTextFromNodes';
 import { useResolvedPortalContainer } from '@/providers/PortalContext';
 
-type CallbackProps = SelectItemObject & {
-  nodeProps: SelectItemProps;
+// Structural only; searchable text is read from the DOM, not the React tree.
+type NormalizedOption = {
+  value: string;
+  disabled?: boolean;
 };
 
+type RegisterItem = (value: string, nodeProps: SelectItemProps) => void;
+
+const toValues = (options: NormalizedOption[]): string[] =>
+  options.map(option => option.value);
+
+const toNavigatable = (options: NormalizedOption[]): string[] =>
+  options.filter(option => !option.disabled).map(option => option.value);
+
 interface NoOptionsDisplayProps {
   allowCreateOption: boolean;
   search: string;
@@ -150,40 +158,21 @@ const NoOptionsDisplay: React.FC<NoOptionsDisplayProps> = ({
   );
 };
 
-const childrenToComboboxItemArray = (
+const childrenToNormalizedOptions = (
   children: ReactNode,
-  callback: (props: CallbackProps) => void,
-  heading?: string
-): SelectItemObject[] => {
+  register: RegisterItem
+): NormalizedOption[] => {
   return Children.toArray(children).flatMap(child => {
     if (isValidElement(child) && child && typeof child === 'object') {
       const type = child.type as FunctionComponent;
       if (type.displayName === 'Select.Group') {
-        const groupChildren = child.props.children;
-        return childrenToComboboxItemArray(
-          groupChildren,
-          callback,
-          getTextFromNodes(child.props.heading).toLowerCase()
-        );
+        return childrenToNormalizedOptions(child.props.children, register);
       } else if (type.displayName === 'Select.Item') {
-        const title = getTextFromNodes(child).toLowerCase();
-        const value = child.props.value;
-        const disabled = child.props.disabled;
-        callback({
-          disabled,
-          value,
-          title,
-          heading,
-          nodeProps: child.props,
-        });
-        return {
-          disabled,
-          value,
-          title,
-          heading,
-        };
+        const { value, disabled } = child.props;
+        register(value, child.props);
+        return { value, disabled };
       } else if ('props' in child && child.props.children) {
-        return childrenToComboboxItemArray(child.props.children, callback, heading);
+        return childrenToNormalizedOptions(child.props.children, register);
       }
     }
     return [];
@@ -225,99 +214,79 @@ export const InternalSelect = ({
   const defaultId = useId();
   const [search, setSearch] = useState('');
   const [highlighted, setHighlighted] = useState<string | undefined>();
-  const visibleList = useRef<string[]>([]);
-  const navigatable = useRef<string[]>([]);
+  // value -> lowercased rendered text (item + its group heading).
+  const [searchSource, setSearchSource] = useState<Map<string, string>>(() => new Map());
   const valueNode = useRef<Map<string, SelectItemProps>>(new Map());
 
-  const updateElements = useCallback(
-    ({ disabled, value, title, heading, nodeProps }: CallbackProps) => {
-      if (title.includes(search) || heading?.includes(search)) {
-        visibleList.current.push(value);
-        if (!disabled) {
-          navigatable.current.push(value);
-        }
-      }
-      valueNode.current.set(value, nodeProps);
-    },
-    [search]
-  );
-
-  const normalizedOptions = useMemo<SelectItemObject[]>(() => {
-    const lowerCasedSearch = search.toLowerCase();
+  const registerValueNode = useCallback<RegisterItem>((value, nodeProps) => {
+    valueNode.current.set(value, nodeProps);
+  }, []);
 
+  const normalizedOptions = useMemo<NormalizedOption[]>(() => {
     if (options) {
       return options.flatMap(option => {
         if ('options' in option) {
-          const heading = getTextFromNodes(option.heading).toLowerCase();
           return (option.options ?? []).map(item => {
             valueNode.current.set(item.value, item);
-            const title = getTextFromNodes(item.label).toLowerCase();
-            if (title.includes(lowerCasedSearch) || heading?.includes(lowerCasedSearch)) {
-              visibleList.current.push(item.value);
-              if (!item.disabled) {
-                navigatable.current.push(item.value);
-              }
-            }
-            return {
-              heading,
-              disabled: item.disabled,
-              value: item.value,
-              title,
-            };
+            return { value: item.value, disabled: item.disabled };
           });
-        } else {
-          valueNode.current.set(option.value, option);
-          const title = getTextFromNodes(option.label).toLowerCase();
-          if (title.includes(lowerCasedSearch)) {
-            visibleList.current.push(option.value);
-            if (!option.disabled) {
-              navigatable.current.push(option.value);
-            }
-          }
-          return {
-            disabled: option.disabled,
-            value: option.value,
-            title: getTextFromNodes(option.label),
-          };
         }
+        valueNode.current.set(option.value, option);
+        return { value: option.value, disabled: option.disabled };
       });
     } else if (children) {
-      return childrenToComboboxItemArray(children, updateElements);
+      return childrenToNormalizedOptions(children, registerValueNode);
     }
 
     return [];
-  }, [children, options, search, updateElements]);
-
-  const onUpdateSearch = useCallback(
-    (search: string) => {
-      setSearch(search);
-      let hasHighlightedValue = false;
-      const visibleItemsList: string[] = [];
-      const navigatableList: string[] = [];
-      const searchLowerCase = search.toLowerCase();
-      normalizedOptions.forEach(item => {
-        if (
-          item.title.includes(searchLowerCase) ||
-          item.heading?.includes(searchLowerCase)
-        ) {
-          if (item.value === highlighted) {
-            hasHighlightedValue = true;
-          }
-          visibleItemsList.push(item.value);
-          if (!item.disabled) {
-            navigatableList.push(item.value);
-          }
-        }
-      });
-      navigatable.current = navigatableList;
-      visibleList.current = visibleItemsList;
-      if (!hasHighlightedValue) {
-        setHighlighted(navigatableList[0] ?? null);
+  }, [children, options, registerValueNode]);
+
+  // Radix mounts the popover content a commit after `open` flips, so the item
+  // text is read once the list node itself commits.
+  const listRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        return;
       }
+      setSearchSource(prev => {
+        // Keep prior entries: items filtered out right now aren't in the DOM to re-read.
+        const next = new Map(prev);
+        node
+          .querySelectorAll<HTMLElement>('[cui-select-item][data-value]')
+          .forEach(el => {
+            const value = el.getAttribute('data-value');
+            if (value === null) {
+              return;
+            }
+            const group = el.closest('[cui-select-group]');
+            const heading =
+              group?.querySelector('[cui-select-group-name]')?.textContent ?? '';
+            next.set(value, `${el.textContent ?? ''} ${heading}`.toLowerCase());
+          });
+        return next;
+      });
     },
-    [highlighted, normalizedOptions]
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- depend on normalizedOptions to re-read DOM if options change
+    [normalizedOptions]
   );
 
+  const matched = useMemo(() => {
+    if (search === '') {
+      return normalizedOptions;
+    }
+    const searchLowerCase = search.toLowerCase();
+    return normalizedOptions.filter(item =>
+      (searchSource.get(item.value) ?? '').includes(searchLowerCase)
+    );
+  }, [search, normalizedOptions, searchSource]);
+
+  const visibleSet = useMemo(() => new Set(toValues(matched)), [matched]);
+  const navigatable = useMemo(() => toNavigatable(matched), [matched]);
+
+  // `highlighted` is the user's last pointer; honor it only while it stays navigable.
+  const effectiveHighlight =
+    highlighted && navigatable.includes(highlighted) ? highlighted : navigatable[0];
+
   const inputRef = useRef<HTMLInputElement>(null);
   const inputModalityProps = useInputModality();
   const portalContainer = useResolvedPortalContainer(container);
@@ -327,42 +296,42 @@ export const InternalSelect = ({
   };
 
   const clearSearch = () => {
-    onUpdateSearch('');
+    setSearch('');
   };
 
   const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     if (!e.defaultPrevented) {
       if (e.key === 'Enter') {
         e.preventDefault();
-        if (highlighted) {
-          onSelect(highlighted, undefined, e);
-        } else if (visibleList.current.length === 0 && allowCreateOption) {
+        if (effectiveHighlight) {
+          onSelect(effectiveHighlight, undefined, e);
+        } else if (matched.length === 0 && allowCreateOption) {
           onSelect(search, 'custom', e);
         }
       } else if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
         e.preventDefault();
-        let nextHighlightedValue = highlighted;
-        const highlightedIndex = navigatable.current.findIndex(
-          value => value === highlighted
+        let nextHighlightedValue = effectiveHighlight;
+        const highlightedIndex = navigatable.findIndex(
+          value => value === effectiveHighlight
         );
         if (e.key === 'ArrowUp') {
           if (highlightedIndex === 0) {
-            nextHighlightedValue = navigatable.current[navigatable.current.length - 1];
+            nextHighlightedValue = navigatable[navigatable.length - 1];
           } else {
-            nextHighlightedValue = navigatable.current[highlightedIndex - 1];
+            nextHighlightedValue = navigatable[highlightedIndex - 1];
           }
         } else if (e.key === 'ArrowDown') {
           e.preventDefault();
-          if (highlightedIndex === navigatable.current.length - 1) {
-            nextHighlightedValue = navigatable.current[0];
+          if (highlightedIndex === navigatable.length - 1) {
+            nextHighlightedValue = navigatable[0];
           } else {
-            nextHighlightedValue = navigatable.current[highlightedIndex + 1];
+            nextHighlightedValue = navigatable[highlightedIndex + 1];
           }
         } else if (e.key === 'End') {
           e.preventDefault();
-          nextHighlightedValue = navigatable.current[navigatable.current.length - 1];
+          nextHighlightedValue = navigatable[navigatable.length - 1];
         } else if (e.key === 'Home') {
-          nextHighlightedValue = navigatable.current[0];
+          nextHighlightedValue = navigatable[0];
           e.preventDefault();
         }
         setHighlighted(nextHighlightedValue);
@@ -370,22 +339,20 @@ export const InternalSelect = ({
     }
   };
   const isHidden = useCallback(
-    (value?: string) => {
-      return !visibleList.current.includes(value ?? '');
-    },
-    [visibleList]
+    (value?: string) => !visibleSet.has(value ?? ''),
+    [visibleSet]
   );
 
   const optionContextValue = useMemo(() => {
     return {
       search,
       updateHighlighted: setHighlighted,
-      highlighted,
+      highlighted: effectiveHighlight,
       isHidden,
       onSelect,
       selectedValues,
     };
-  }, [search, highlighted, isHidden, onSelect, selectedValues]);
+  }, [search, effectiveHighlight, isHidden, onSelect, selectedValues]);
 
   const onCreateOption = (e: MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -468,10 +435,7 @@ export const InternalSelect = ({
               sideOffset={5}
               onFocus={onFocus}
               onCloseAutoFocus={() => {
-                onUpdateSearch('');
-              }}
-              onOpenAutoFocus={() => {
-                setHighlighted(visibleList.current[0]);
+                setSearch('');
               }}
               align="start"
               $useFullWidthItems={useFullWidthItems}
@@ -482,7 +446,7 @@ export const InternalSelect = ({
                   <SearchBar
                     ref={inputRef}
                     value={search}
-                    onChange={e => onUpdateSearch(e.target.value)}
+                    onChange={e => setSearch(e.target.value)}
                     data-testid="select-search-input"
                     onKeyDown={onKeyDown}
                     $showSearch={showSearch}
@@ -499,7 +463,10 @@ export const InternalSelect = ({
                     size="xs"
                   />
                 </SearchBarContainer>
-                <SelectListContent $maxHeight={maxHeight}>
+                <SelectListContent
+                  ref={listRef}
+                  $maxHeight={maxHeight}
+                >
                   <OptionContext.Provider value={optionContextValue}>
                     {options && options.length > 0
                       ? options.map((props, index) => {
@@ -548,18 +515,17 @@ export const InternalSelect = ({
                       : children}
                   </OptionContext.Provider>
                 </SelectListContent>
-                {visibleList.current.length === 0 &&
-                  (allowCreateOption || !!noAvailableOptions) && (
-                    <NoOptionsDisplay
-                      allowCreateOption={allowCreateOption}
-                      search={search}
-                      customText={customText}
-                      noAvailableOptions={noAvailableOptions}
-                      onCreateOption={onCreateOption}
-                      onOpenChange={onOpenChange}
-                      containerProps={props}
-                    />
-                  )}
+                {matched.length === 0 && (allowCreateOption || !!noAvailableOptions) && (
+                  <NoOptionsDisplay
+                    allowCreateOption={allowCreateOption}
+                    search={search}
+                    customText={customText}
+                    noAvailableOptions={noAvailableOptions}
+                    onCreateOption={onCreateOption}
+                    onOpenChange={onOpenChange}
+                    containerProps={props}
+                  />
+                )}
               </SelectList>
             </SelectPopoverContent>
           </Portal>
@@ -585,6 +551,7 @@ export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
     return (
       <SelectGroupContainer
         {...props}
+        cui-select-group=""
         ref={mergeRefs([
           forwardedRef,
           node => {
@@ -598,7 +565,7 @@ export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
           },
         ])}
       >
-        <SelectGroupName>{heading}</SelectGroupName>
+        <SelectGroupName cui-select-group-name="">{heading}</SelectGroupName>
         <SelectGroupContent>{children}</SelectGroupContent>
       </SelectGroupContainer>
     );

From c5fcc97e3b8b1998b6a709c5d529997f1d1e4206 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 02:25:40 +0200
Subject: [PATCH 05/12] chore: add changeset

---
 .changeset/wide-paths-vanish.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/wide-paths-vanish.md

diff --git a/.changeset/wide-paths-vanish.md b/.changeset/wide-paths-vanish.md
new file mode 100644
index 000000000..0c8db8125
--- /dev/null
+++ b/.changeset/wide-paths-vanish.md
@@ -0,0 +1,10 @@
+---
+"@clickhouse/click-ui": patch
+---
+
+Fix a few bugs by changing the way Select works with its options: instead of imperative rebuilding of several service entities,
+derive them in-flow, “you might not need an effect”.
+
+Bugs fixed:
+- search now always works in Selects and matches any text that is rendered in items
+- disabled items can no longer be selected via keyboard navigation

From 82b4cbde2aa750c201d33d09583d5bfa6eac5cbd Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 02:30:34 +0200
Subject: [PATCH 06/12] chore: fix changeset name

---
 .changeset/{wide-paths-vanish.md => fix-select-search.md} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename .changeset/{wide-paths-vanish.md => fix-select-search.md} (100%)

diff --git a/.changeset/wide-paths-vanish.md b/.changeset/fix-select-search.md
similarity index 100%
rename from .changeset/wide-paths-vanish.md
rename to .changeset/fix-select-search.md

From 3eb328ece1e5c5ae47385051f00c0f03f9174e13 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 02:49:58 +0200
Subject: [PATCH 07/12] refactor(Select): clearer search naming and leaner
 comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename the search derivations to say what they hold — matchedOptions
(option objects), visibleValues / navigableValues (value strings) — inline
the two single-use helpers, and drop comments that restated the type or a
path not taken. Add a test pinning that search matches an option's
description text.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/Select.search.test.tsx  | 17 +++++
 .../Select/common/InternalSelect.tsx          | 68 ++++++++++---------
 2 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/src/components/Select/Select.search.test.tsx b/src/components/Select/Select.search.test.tsx
index b395b1f4c..6a9725a64 100644
--- a/src/components/Select/Select.search.test.tsx
+++ b/src/components/Select/Select.search.test.tsx
@@ -162,6 +162,23 @@ describe('InternalSelect search', () => {
       type(getByTestId, 'ban');
       expect(queryByText('Banana')).not.toBeNull();
     });
+
+    it('matches text in an option description', () => {
+      const { getByTestId, queryByText } = renderCUI(
+        <Select
+          label="s"
+          showSearch
+          options={[
+            { value: 'a', label: 'Apple', description: 'a red fruit' },
+            { value: 'b', label: 'Banana', description: 'a yellow fruit' },
+          ]}
+        />
+      );
+      open(getByTestId);
+      type(getByTestId, 'yellow');
+      expect(queryByText('Banana')).not.toBeNull();
+      expect(queryByText('Apple')).toBeNull();
+    });
   });
 
   describe('group heading', () => {
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index b6ca51c6b..7ad920c0d 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -59,7 +59,6 @@ import { useInputModality } from '@/hooks/internal';
 import { cn } from '@/lib/cva';
 import { useResolvedPortalContainer } from '@/providers/PortalContext';
 
-// Structural only; searchable text is read from the DOM, not the React tree.
 type NormalizedOption = {
   value: string;
   disabled?: boolean;
@@ -67,12 +66,6 @@ type NormalizedOption = {
 
 type RegisterItem = (value: string, nodeProps: SelectItemProps) => void;
 
-const toValues = (options: NormalizedOption[]): string[] =>
-  options.map(option => option.value);
-
-const toNavigatable = (options: NormalizedOption[]): string[] =>
-  options.filter(option => !option.disabled).map(option => option.value);
-
 interface NoOptionsDisplayProps {
   allowCreateOption: boolean;
   search: string;
@@ -270,7 +263,7 @@ export const InternalSelect = ({
     [normalizedOptions]
   );
 
-  const matched = useMemo(() => {
+  const matchedOptions = useMemo(() => {
     if (search === '') {
       return normalizedOptions;
     }
@@ -280,12 +273,20 @@ export const InternalSelect = ({
     );
   }, [search, normalizedOptions, searchSource]);
 
-  const visibleSet = useMemo(() => new Set(toValues(matched)), [matched]);
-  const navigatable = useMemo(() => toNavigatable(matched), [matched]);
+  const visibleValues = useMemo(
+    () => new Set(matchedOptions.map(o => o.value)),
+    [matchedOptions]
+  );
+  const navigableValues = useMemo(
+    () => matchedOptions.filter(o => !o.disabled).map(o => o.value),
+    [matchedOptions]
+  );
 
   // `highlighted` is the user's last pointer; honor it only while it stays navigable.
   const effectiveHighlight =
-    highlighted && navigatable.includes(highlighted) ? highlighted : navigatable[0];
+    highlighted && navigableValues.includes(highlighted)
+      ? highlighted
+      : navigableValues[0];
 
   const inputRef = useRef<HTMLInputElement>(null);
   const inputModalityProps = useInputModality();
@@ -305,33 +306,33 @@ export const InternalSelect = ({
         e.preventDefault();
         if (effectiveHighlight) {
           onSelect(effectiveHighlight, undefined, e);
-        } else if (matched.length === 0 && allowCreateOption) {
+        } else if (matchedOptions.length === 0 && allowCreateOption) {
           onSelect(search, 'custom', e);
         }
       } else if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
         e.preventDefault();
         let nextHighlightedValue = effectiveHighlight;
-        const highlightedIndex = navigatable.findIndex(
+        const highlightedIndex = navigableValues.findIndex(
           value => value === effectiveHighlight
         );
         if (e.key === 'ArrowUp') {
           if (highlightedIndex === 0) {
-            nextHighlightedValue = navigatable[navigatable.length - 1];
+            nextHighlightedValue = navigableValues[navigableValues.length - 1];
           } else {
-            nextHighlightedValue = navigatable[highlightedIndex - 1];
+            nextHighlightedValue = navigableValues[highlightedIndex - 1];
           }
         } else if (e.key === 'ArrowDown') {
           e.preventDefault();
-          if (highlightedIndex === navigatable.length - 1) {
-            nextHighlightedValue = navigatable[0];
+          if (highlightedIndex === navigableValues.length - 1) {
+            nextHighlightedValue = navigableValues[0];
           } else {
-            nextHighlightedValue = navigatable[highlightedIndex + 1];
+            nextHighlightedValue = navigableValues[highlightedIndex + 1];
           }
         } else if (e.key === 'End') {
           e.preventDefault();
-          nextHighlightedValue = navigatable[navigatable.length - 1];
+          nextHighlightedValue = navigableValues[navigableValues.length - 1];
         } else if (e.key === 'Home') {
-          nextHighlightedValue = navigatable[0];
+          nextHighlightedValue = navigableValues[0];
           e.preventDefault();
         }
         setHighlighted(nextHighlightedValue);
@@ -339,8 +340,8 @@ export const InternalSelect = ({
     }
   };
   const isHidden = useCallback(
-    (value?: string) => !visibleSet.has(value ?? ''),
-    [visibleSet]
+    (value?: string) => !visibleValues.has(value ?? ''),
+    [visibleValues]
   );
 
   const optionContextValue = useMemo(() => {
@@ -515,17 +516,18 @@ export const InternalSelect = ({
                       : children}
                   </OptionContext.Provider>
                 </SelectListContent>
-                {matched.length === 0 && (allowCreateOption || !!noAvailableOptions) && (
-                  <NoOptionsDisplay
-                    allowCreateOption={allowCreateOption}
-                    search={search}
-                    customText={customText}
-                    noAvailableOptions={noAvailableOptions}
-                    onCreateOption={onCreateOption}
-                    onOpenChange={onOpenChange}
-                    containerProps={props}
-                  />
-                )}
+                {matchedOptions.length === 0 &&
+                  (allowCreateOption || !!noAvailableOptions) && (
+                    <NoOptionsDisplay
+                      allowCreateOption={allowCreateOption}
+                      search={search}
+                      customText={customText}
+                      noAvailableOptions={noAvailableOptions}
+                      onCreateOption={onCreateOption}
+                      onOpenChange={onOpenChange}
+                      containerProps={props}
+                    />
+                  )}
               </SelectList>
             </SelectPopoverContent>
           </Portal>

From b456b4525fafb4463bbd26ed2878971ec69034bc Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 04:23:53 +0200
Subject: [PATCH 08/12] fix(Select): keep filtered options mounted so search
 reads their text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Filtered items now render hidden (via the `hidden` attribute) instead of
unmounting, so every option's text stays in the DOM for the search-source
capture. This makes options that arrive while the menu is open — e.g. async
loads, or fetch-as-you-type — searchable without reopening, and lets the
capture drop its carry-over since it always reads the complete set.

Group visibility now counts non-hidden items. Select-family search tests
assert visibility (toBeVisible / not.toBeVisible) rather than DOM presence,
since a filtered row is now present-but-hidden.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .changeset/fix-select-search.md               |  4 +-
 .../CheckboxMultiSelect.test.tsx              | 56 ++++++++---------
 .../MultiSelect/MultiSelect.test.tsx          | 60 +++++++++----------
 src/components/Select/Select.search.test.tsx  | 38 ++++++------
 src/components/Select/Select.test.tsx         | 60 +++++++++----------
 .../Select/common/InternalSelect.tsx          | 49 +++++++--------
 6 files changed, 133 insertions(+), 134 deletions(-)

diff --git a/.changeset/fix-select-search.md b/.changeset/fix-select-search.md
index 0c8db8125..6e2ca8869 100644
--- a/.changeset/fix-select-search.md
+++ b/.changeset/fix-select-search.md
@@ -6,5 +6,7 @@ Fix a few bugs by changing the way Select works with its options: instead of imp
 derive them in-flow, “you might not need an effect”.
 
 Bugs fixed:
-- search now always works in Selects and matches any text that is rendered in items
+- search now always works in Selects and matches any text that is rendered in items, including options that arrive while the menu is open
 - disabled items can no longer be selected via keyboard navigation
+
+Note: filtered-out items now stay mounted (hidden) instead of unmounting, so their rendered text stays available to search.
diff --git a/src/components/CheckboxMultiSelect/CheckboxMultiSelect.test.tsx b/src/components/CheckboxMultiSelect/CheckboxMultiSelect.test.tsx
index 2e81fec69..466942979 100644
--- a/src/components/CheckboxMultiSelect/CheckboxMultiSelect.test.tsx
+++ b/src/components/CheckboxMultiSelect/CheckboxMultiSelect.test.tsx
@@ -258,11 +258,11 @@ describe('CheckboxCheckboxMultiSelect', () => {
       const selectTrigger = getByTestId('select-trigger');
       selectTrigger && fireEvent.click(selectTrigger);
 
-      expect(queryByText('Content0')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).toBeInTheDocument();
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content3')).toBeInTheDocument();
-      expect(queryByText('Content4')).toBeInTheDocument();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
     });
 
     it('filters items by search text', () => {
@@ -275,16 +275,16 @@ describe('CheckboxCheckboxMultiSelect', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).toBeInTheDocument();
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content3')).toBeInTheDocument();
-      expect(queryByText('Content4')).toBeInTheDocument();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).not.toBeInTheDocument();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -299,16 +299,16 @@ describe('CheckboxCheckboxMultiSelect', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).toBeInTheDocument();
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content3')).toBeInTheDocument();
-      expect(queryByText('Content4')).toBeInTheDocument();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).not.toBeInTheDocument();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -325,16 +325,16 @@ describe('CheckboxCheckboxMultiSelect', () => {
       fireEvent.change(selectInput, {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).not.toBeInTheDocument();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       fireEvent.click(getByTestId('select-search-close'));
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).toBeInTheDocument();
-      expect(queryByText('Content2')).toBeInTheDocument();
-      expect(queryByText('Content3')).toBeInTheDocument();
-      expect(queryByText('Content4')).toBeInTheDocument();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       expect(document.activeElement).toBe(selectInput);
     });
 
@@ -350,8 +350,8 @@ describe('CheckboxCheckboxMultiSelect', () => {
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'nodata' },
       });
-      expect(queryByText('Content2')).not.toBeInTheDocument();
-      expect(queryByText('Content1 long text content')).not.toBeInTheDocument();
+      expect(queryByText('Content2')).not.toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       const btn = queryByText(/No Options found/i);
       expect(btn).toBeInTheDocument();
diff --git a/src/components/MultiSelect/MultiSelect.test.tsx b/src/components/MultiSelect/MultiSelect.test.tsx
index 55e46874f..c8d5add7e 100644
--- a/src/components/MultiSelect/MultiSelect.test.tsx
+++ b/src/components/MultiSelect/MultiSelect.test.tsx
@@ -223,11 +223,11 @@ describe('MultiSelect', () => {
       expect(selectTrigger).not.toBeNull();
       selectTrigger && fireEvent.click(selectTrigger);
 
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
     });
 
     it('filter by text', () => {
@@ -239,16 +239,16 @@ describe('MultiSelect', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -262,16 +262,16 @@ describe('MultiSelect', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -287,16 +287,16 @@ describe('MultiSelect', () => {
       fireEvent.change(selectInput, {
         target: { value: 'content2' },
       });
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       fireEvent.click(getByTestId('select-search-close'));
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       expect(document.activeElement).toBe(selectInput);
     });
     it('on no options available show no data', () => {
@@ -310,8 +310,8 @@ describe('MultiSelect', () => {
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'nodata' },
       });
-      expect(queryByText('Content2')).toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).not.toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       const btn = queryByText(/No Options found/i);
       expect(btn).not.toBeNull();
@@ -333,8 +333,8 @@ describe('MultiSelect', () => {
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'nodata' },
       });
-      expect(queryByText('Content2')).toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).not.toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       const btn = queryByText(/No Field found/i);
       expect(btn).not.toBeNull();
diff --git a/src/components/Select/Select.search.test.tsx b/src/components/Select/Select.search.test.tsx
index 6a9725a64..b0819516e 100644
--- a/src/components/Select/Select.search.test.tsx
+++ b/src/components/Select/Select.search.test.tsx
@@ -49,8 +49,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'ban');
-      expect(queryByText('Banana')).not.toBeNull();
-      expect(queryByText('Apple')).toBeNull();
+      expect(queryByText('Banana')).toBeVisible();
+      expect(queryByText('Apple')).not.toBeVisible();
     });
 
     it('matches text supplied via the `label` prop', () => {
@@ -68,8 +68,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'ban');
-      expect(queryByText('Banana')).not.toBeNull();
-      expect(queryByText('Apple')).toBeNull();
+      expect(queryByText('Banana')).toBeVisible();
+      expect(queryByText('Apple')).not.toBeVisible();
     });
 
     it('matches numeric children', () => {
@@ -81,8 +81,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, '2025');
-      expect(queryByText('2025')).not.toBeNull();
-      expect(queryByText('2024')).toBeNull();
+      expect(queryByText('2025')).toBeVisible();
+      expect(queryByText('2024')).not.toBeVisible();
     });
 
     it('matches text rendered by a custom child component (the reported case)', () => {
@@ -98,8 +98,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'bill');
-      expect(queryByText('Billing')).not.toBeNull();
-      expect(queryByText('Analytics')).toBeNull();
+      expect(queryByText('Billing')).toBeVisible();
+      expect(queryByText('Analytics')).not.toBeVisible();
     });
 
     it('restores every item when the search is cleared', () => {
@@ -115,10 +115,10 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'bill');
-      expect(queryByText('Analytics')).toBeNull();
+      expect(queryByText('Analytics')).not.toBeVisible();
       type(getByTestId, '');
-      expect(queryByText('Analytics')).not.toBeNull();
-      expect(queryByText('Billing')).not.toBeNull();
+      expect(queryByText('Analytics')).toBeVisible();
+      expect(queryByText('Billing')).toBeVisible();
     });
   });
 
@@ -136,8 +136,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'bill');
-      expect(queryByText('Billing')).not.toBeNull();
-      expect(queryByText('Analytics')).toBeNull();
+      expect(queryByText('Billing')).toBeVisible();
+      expect(queryByText('Analytics')).not.toBeVisible();
     });
 
     it('makes options added while open searchable without reopening', () => {
@@ -160,7 +160,7 @@ describe('InternalSelect search', () => {
         />
       );
       type(getByTestId, 'ban');
-      expect(queryByText('Banana')).not.toBeNull();
+      expect(queryByText('Banana')).toBeVisible();
     });
 
     it('matches text in an option description', () => {
@@ -176,8 +176,8 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'yellow');
-      expect(queryByText('Banana')).not.toBeNull();
-      expect(queryByText('Apple')).toBeNull();
+      expect(queryByText('Banana')).toBeVisible();
+      expect(queryByText('Apple')).not.toBeVisible();
     });
   });
 
@@ -196,9 +196,9 @@ describe('InternalSelect search', () => {
       );
       open(getByTestId);
       type(getByTestId, 'fruit');
-      expect(queryByText('Apple')).not.toBeNull();
-      expect(queryByText('Banana')).not.toBeNull();
-      expect(queryByText('Carrot')).toBeNull();
+      expect(queryByText('Apple')).toBeVisible();
+      expect(queryByText('Banana')).toBeVisible();
+      expect(queryByText('Carrot')).not.toBeVisible();
     });
   });
 
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 07367628a..2dcd6826b 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -261,11 +261,11 @@ describe('Select', () => {
       expect(selectTrigger).not.toBeNull();
       selectTrigger && fireEvent.click(selectTrigger);
 
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
     });
 
     it('filter by text', () => {
@@ -277,16 +277,16 @@ describe('Select', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content3' },
       });
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -300,16 +300,16 @@ describe('Select', () => {
       selectTrigger && fireEvent.click(selectTrigger);
 
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'content3' },
       });
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
     });
 
@@ -325,16 +325,16 @@ describe('Select', () => {
       fireEvent.change(selectInput, {
         target: { value: 'content3' },
       });
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       fireEvent.click(getByTestId('select-search-close'));
       expect(queryByText('Group label')).toBeVisible();
-      expect(queryByText('Content0')).not.toBeNull();
-      expect(queryByText('Content1 long text content')).not.toBeNull();
-      expect(queryByText('Content2')).not.toBeNull();
-      expect(queryByText('Content3')).not.toBeNull();
-      expect(queryByText('Content4')).not.toBeNull();
+      expect(queryByText('Content0')).toBeVisible();
+      expect(queryByText('Content1 long text content')).toBeVisible();
+      expect(queryByText('Content2')).toBeVisible();
+      expect(queryByText('Content3')).toBeVisible();
+      expect(queryByText('Content4')).toBeVisible();
       expect(document.activeElement).toBe(selectInput);
     });
     it('on no options available show no data', () => {
@@ -348,8 +348,8 @@ describe('Select', () => {
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'nodata' },
       });
-      expect(queryByText('Content2')).toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).not.toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       const btn = queryByText(/No Options found/i);
       expect(btn).not.toBeNull();
@@ -371,8 +371,8 @@ describe('Select', () => {
       fireEvent.change(getByTestId('select-search-input'), {
         target: { value: 'nodata' },
       });
-      expect(queryByText('Content2')).toBeNull();
-      expect(queryByText('Content1 long text content')).toBeNull();
+      expect(queryByText('Content2')).not.toBeVisible();
+      expect(queryByText('Content1 long text content')).not.toBeVisible();
       expect(queryByText('Group label')).not.toBeVisible();
       const btn = queryByText(/No Field found/i);
       expect(btn).not.toBeNull();
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 7ad920c0d..9cb8c56dc 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -241,23 +241,18 @@ export const InternalSelect = ({
       if (!node) {
         return;
       }
-      setSearchSource(prev => {
-        // Keep prior entries: items filtered out right now aren't in the DOM to re-read.
-        const next = new Map(prev);
-        node
-          .querySelectorAll<HTMLElement>('[cui-select-item][data-value]')
-          .forEach(el => {
-            const value = el.getAttribute('data-value');
-            if (value === null) {
-              return;
-            }
-            const group = el.closest('[cui-select-group]');
-            const heading =
-              group?.querySelector('[cui-select-group-name]')?.textContent ?? '';
-            next.set(value, `${el.textContent ?? ''} ${heading}`.toLowerCase());
-          });
-        return next;
+      const next = new Map<string, string>();
+      node.querySelectorAll<HTMLElement>('[cui-select-item][data-value]').forEach(el => {
+        const value = el.getAttribute('data-value');
+        if (value === null) {
+          return;
+        }
+        const group = el.closest('[cui-select-group]');
+        const heading =
+          group?.querySelector('[cui-select-group-name]')?.textContent ?? '';
+        next.set(value, `${el.textContent ?? ''} ${heading}`.toLowerCase());
       });
+      setSearchSource(next);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- depend on normalizedOptions to re-read DOM if options change
     [normalizedOptions]
@@ -557,7 +552,8 @@ export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
         ref={mergeRefs([
           forwardedRef,
           node => {
-            const hidden = node?.querySelectorAll('[cui-select-item]').length === 0;
+            const hidden =
+              node?.querySelectorAll('[cui-select-item]:not([hidden])').length === 0;
             if (hidden) {
               node?.setAttribute('hidden', '');
             } else {
@@ -612,15 +608,16 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       }
     };
 
-    if (isHidden(value)) {
-      return null;
-    }
+    // Filtered items stay mounted (just hidden) so their text remains readable
+    // from the DOM for search; see the searchSource capture in InternalSelect.
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
 
     return (
       <>
         <GenericMenuItem
           {...props}
+          hidden={hidden}
           data-value={value}
           onClick={onSelectValue}
           onMouseOver={onMouseOver}
@@ -656,7 +653,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
             size="sm"
           />
         </GenericMenuItem>
-        {separator && <Separator size="sm" />}
+        {separator && !hidden && <Separator size="sm" />}
       </>
     );
   }
@@ -711,16 +708,16 @@ export const MultiSelectCheckboxItem = forwardRef<
       }
     };
 
-    if (isHidden(value)) {
-      return null;
-    }
-
+    // Filtered items stay mounted (just hidden) so their text remains readable
+    // from the DOM for search; see the searchSource capture in InternalSelect.
+    const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
 
     return (
       <>
         <GenericMenuItem
           {...props}
+          hidden={hidden}
           data-value={value}
           onClick={handleMenuItemClick}
           onMouseOver={handleMenuItemMouseOver}
@@ -761,7 +758,7 @@ export const MultiSelectCheckboxItem = forwardRef<
             </IconWrapper>
           </Container>
         </GenericMenuItem>
-        {separator && <Separator size="sm" />}
+        {separator && !hidden && <Separator size="sm" />}
       </>
     );
   }

From 64078fb39441adce433f27edf3df509bfb0a2566 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 04:41:47 +0200
Subject: [PATCH 09/12] refactor(Select): drop now-unused SelectItemObject type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InternalSelect no longer builds a static item model, so the shared
SelectItemObject type (and its re-export) is dead — AutoComplete keeps
its own local copy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/common/index.ts | 1 -
 src/components/Select/common/types.ts | 7 -------
 2 files changed, 8 deletions(-)

diff --git a/src/components/Select/common/index.ts b/src/components/Select/common/index.ts
index b66cbd2f1..e46902830 100644
--- a/src/components/Select/common/index.ts
+++ b/src/components/Select/common/index.ts
@@ -6,7 +6,6 @@ export type {
   SelectOptionListItem,
   SelectionType,
   SelectContainerProps,
-  SelectItemObject,
 } from './types';
 export { InternalSelect } from './InternalSelect';
 export { OptionContext } from './OptionContext';
diff --git a/src/components/Select/common/types.ts b/src/components/Select/common/types.ts
index d7b3568ce..396fef1cf 100644
--- a/src/components/Select/common/types.ts
+++ b/src/components/Select/common/types.ts
@@ -141,10 +141,3 @@ export interface BaseMultiSelectProps extends Omit<
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
 }
-
-export type SelectItemObject = {
-  disabled?: boolean;
-  value: string;
-  title: string;
-  heading?: string;
-};

From 35b57c23ae028f0a741049eab5e7f565eb64604a Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 14:43:15 +0200
Subject: [PATCH 10/12] refactor(Select): route option value-node registration
 through registerValueNode

The options path poked valueNode.current directly while the children path
went through registerValueNode; both now use the one helper, so valueNode
has a single writer.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/common/InternalSelect.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 9cb8c56dc..9926f5182 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -220,11 +220,11 @@ export const InternalSelect = ({
       return options.flatMap(option => {
         if ('options' in option) {
           return (option.options ?? []).map(item => {
-            valueNode.current.set(item.value, item);
+            registerValueNode(item.value, item);
             return { value: item.value, disabled: item.disabled };
           });
         }
-        valueNode.current.set(option.value, option);
+        registerValueNode(option.value, option);
         return { value: option.value, disabled: option.disabled };
       });
     } else if (children) {

From 64347b649fb897ef989ac34dc63044078e081479 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 14:43:40 +0200
Subject: [PATCH 11/12] docs(Select): trim duplicated item comment to one line

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/common/InternalSelect.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 9926f5182..d94d0e7b9 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -608,8 +608,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       }
     };
 
-    // Filtered items stay mounted (just hidden) so their text remains readable
-    // from the DOM for search; see the searchSource capture in InternalSelect.
+    // Render hidden rather than unmounting so the text stays in the DOM for search.
     const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
 
@@ -708,8 +707,7 @@ export const MultiSelectCheckboxItem = forwardRef<
       }
     };
 
-    // Filtered items stay mounted (just hidden) so their text remains readable
-    // from the DOM for search; see the searchSource capture in InternalSelect.
+    // Render hidden rather than unmounting so the text stays in the DOM for search.
     const hidden = isHidden(value);
     const isChecked = selectedValues.includes(value);
 

From 5ac29e14d3babe53de8376a3706709ca4e735850 Mon Sep 17 00:00:00 2001
From: Nick Troshkov <nick.troshkov@clickhouse.com>
Date: Tue, 28 Jul 2026 17:51:04 +0200
Subject: [PATCH 12/12] fix(Select): force filtered items hidden via an
 explicit CSS rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `hidden` attribute alone is unreliable — the item's own `display` can
override it, and browser handling varies. Add a Select-owned
`.select-item[hidden] { display: none }` rule (specificity outranks the
item's `display`, independent of stylesheet order) so a filtered item is
reliably hidden while staying mounted for the DOM-text search.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/Select/common/InternalSelect.tsx          | 2 ++
 src/components/Select/common/SelectComponents.module.css | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index d94d0e7b9..fa4f26658 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -617,6 +617,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         <GenericMenuItem
           {...props}
           hidden={hidden}
+          className={cn(selectStyles['select-item'], props.className)}
           data-value={value}
           onClick={onSelectValue}
           onMouseOver={onMouseOver}
@@ -716,6 +717,7 @@ export const MultiSelectCheckboxItem = forwardRef<
         <GenericMenuItem
           {...props}
           hidden={hidden}
+          className={cn(selectStyles['select-item'], props.className)}
           data-value={value}
           onClick={handleMenuItemClick}
           onMouseOver={handleMenuItemMouseOver}
diff --git a/src/components/Select/common/SelectComponents.module.css b/src/components/Select/common/SelectComponents.module.css
index 4947f161b..d78bc9314 100644
--- a/src/components/Select/common/SelectComponents.module.css
+++ b/src/components/Select/common/SelectComponents.module.css
@@ -224,6 +224,10 @@
   display: none;
 }
 
+.select-item[hidden] {
+  display: none;
+}
+
 .select-group-name {
   display: flex;
   width: 100%;