From c0f79b15f33d7ab50bc888e9c81665ee6a6520ca Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 25 May 2026 16:14:06 +0200
Subject: [PATCH 01/14] [stories] fixed visible setting for autosuggest after
 clear query and typing the new one

---
 .../docs/examples/autosuggest_example.tsx          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
index f3a9d18e17..eb1992d9ac 100644
--- a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
+++ b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
@@ -67,6 +67,7 @@ const Demo = () => {
   const [visible, setVisible] = React.useState(false);
   const [query, setQuery] = React.useState('');
   const [suggestions, setSuggestions] = React.useState<Suggestion[]>([]);
+  const [isEmptyQuery, setIsEmptyQuery] = React.useState(true);
   const loadSuggestions = React.useCallback(
     debounce(
       (query: string) => fakeFetch(query).then((suggestions) => setSuggestions(suggestions)),
@@ -75,8 +76,17 @@ const Demo = () => {
     [],
   );
   React.useEffect(() => {
-    loadSuggestions(query);
-  }, [query]);
+    if (query === '') {
+      setSuggestions([]);
+      setIsEmptyQuery(true);
+    } else {
+      if (isEmptyQuery) {
+        setVisible(true);
+        setIsEmptyQuery(false);
+      }
+      loadSuggestions(query);
+    }
+  }, [query, isEmptyQuery]);
   const handleSelect = React.useCallback((x: string) => {
     setQuery(x);
     setVisible(false);

From 1a93246abb146cf3d7d8a8af2ed3683228bb371b Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Wed, 3 Jun 2026 12:49:44 +0200
Subject: [PATCH 02/14] [select] added new AutoSuggest component

---
 semcore/select/package.json                   |   2 +-
 .../components/AutoSuggest/AutoSuggest.tsx    | 146 ++++++++++++++
 .../AutoSuggest/AutoSuggest.type.ts           |  29 +++
 .../src/components/AutoSuggest/Highlight.tsx  |  20 ++
 semcore/select/src/index.d.ts                 |   6 +-
 semcore/select/src/index.js                   |   1 +
 .../docs/examples/autosuggest_example.tsx     | 189 ++++++------------
 7 files changed, 262 insertions(+), 131 deletions(-)
 create mode 100644 semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
 create mode 100644 semcore/select/src/components/AutoSuggest/AutoSuggest.type.ts
 create mode 100644 semcore/select/src/components/AutoSuggest/Highlight.tsx

diff --git a/semcore/select/package.json b/semcore/select/package.json
index 3eb66f056b..bd8b0bd0e6 100644
--- a/semcore/select/package.json
+++ b/semcore/select/package.json
@@ -8,7 +8,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "pnpm semcore-builder --source=js && pnpm vite build"
+    "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"
   },
   "exports": {
     "types": "./lib/types/index.d.ts",
diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
new file mode 100644
index 0000000000..5d9c75ab2d
--- /dev/null
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -0,0 +1,146 @@
+import type { Intergalactic } from '@semcore/core';
+import { Component, createComponent, Root } from '@semcore/core';
+import Input from '@semcore/input';
+import Spin from '@semcore/spin';
+import React from 'react';
+
+import type { NSAutoSuggest } from './AutoSuggest.type';
+import { Highlight } from './Highlight';
+import Select from '../../index';
+
+class AutoSuggestRoot extends Component<
+  Intergalactic.InternalTypings.InferComponentProps<NSAutoSuggest.Component>,
+  [],
+  { value: string },
+  {},
+  NSAutoSuggest.State,
+  NSAutoSuggest.DefaultProps
+> {
+  static defaultProps: NSAutoSuggest.DefaultProps = {
+    defaultValue: '',
+  };
+
+  private abortController: AbortController | undefined;
+  private changeDebounce = 0;
+
+  state: NSAutoSuggest.State = {
+    isVisible: false,
+    highlightedIndex: -1,
+    suggestions: [],
+    openOnChanges: true,
+    isLoading: false,
+  };
+
+  protected uncontrolledProps() {
+    return {
+      value: (value: string) => {
+        return value;
+      },
+    };
+  }
+
+  handleChange = (value: string) => {
+    if (this.changeDebounce) {
+      clearTimeout(this.changeDebounce);
+    }
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    if (value !== this.asProps.value && this.state.openOnChanges) {
+      const { suggestions } = this.asProps;
+
+      if (!Array.isArray(suggestions)) {
+        this.setState({ isLoading: true });
+      }
+
+      this.changeDebounce = setTimeout(async () => {
+        this.handleChangeVisible(true);
+
+        if (Array.isArray(suggestions)) {
+          const filteredSuggestions = value === '' ? [] : suggestions.filter((breed) => breed.toLowerCase().includes(value.toLowerCase()));
+
+          this.setState({ suggestions: filteredSuggestions });
+        } else {
+          this.abortController = new AbortController();
+          const abortSignal = this.abortController.signal;
+
+          const filteredSuggestions = await suggestions(value, abortSignal);
+          this.setState({ suggestions: filteredSuggestions, isLoading: false });
+        }
+      }, 300);
+    }
+  };
+
+  handleChangeVisible = (isVisible: boolean) => {
+    this.setState({ isVisible });
+  };
+
+  handleChangeHighlightedIndex = (index: number | null) => {
+    this.setState({ highlightedIndex: index ?? -1 });
+  };
+
+  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!e.key.startsWith('Array')) {
+      this.setState({ highlightedIndex: -1 });
+    }
+    if (e.key === 'Escape' && this.state.isVisible) {
+      this.setState({ openOnChanges: false });
+    }
+  };
+
+  handleChangeSelect = (value: string) => {
+    this.handlers.value(value);
+  };
+
+  handleFocus = () => {
+    const { value } = this.asProps;
+    this.setState({ openOnChanges: true, isVisible: value === '' });
+  };
+
+  handleBlur = () => {
+    this.handleChangeVisible(false);
+  };
+
+  render() {
+    const { value } = this.asProps;
+    const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
+
+    return (
+      <Select
+        interaction='none'
+        visible={isVisible}
+        onVisibleChange={this.handleChangeVisible}
+        highlightedIndex={highlightedIndex}
+        onHighlightedIndexChange={this.handleChangeHighlightedIndex}
+        defaultHighlightedIndex={null}
+      >
+        <Select.Trigger tag={Input} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+          <Root
+            render={Input.Value}
+            value={value}
+            role='combobox'
+            placeholder='Start typing for options'
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            autoComplete='off'
+          />
+          {isLoading && (
+            <Input.Addon tag={Spin} size='l' />
+          )}
+        </Select.Trigger>
+        {suggestions.length > 0 && (
+          <Select.Menu>
+            {suggestions.map((option) => (
+              <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
+                <Highlight highlight={value}>{option}</Highlight>
+              </Select.Option>
+            ))}
+          </Select.Menu>
+        )}
+      </Select>
+    );
+  }
+}
+
+export const AutoSuggest = createComponent<NSAutoSuggest.Component, typeof AutoSuggestRoot>(AutoSuggestRoot);
diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.type.ts b/semcore/select/src/components/AutoSuggest/AutoSuggest.type.ts
new file mode 100644
index 0000000000..a55e703dea
--- /dev/null
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.type.ts
@@ -0,0 +1,29 @@
+import type { Intergalactic } from '@semcore/core';
+
+declare namespace NSAutoSuggest {
+  type Suggestion = string;
+
+  type Props = {
+    value?: string;
+    onChange?: (value: string) => void;
+    suggestions: Suggestion[] | ((value: string, signal: AbortSignal) => Promise<Suggestion[]>);
+  };
+
+  type State = {
+    isVisible: boolean;
+    highlightedIndex: number;
+    suggestions: Suggestion[];
+    openOnChanges: boolean;
+    isLoading: boolean;
+  };
+
+  type DefaultProps = {
+    defaultValue: string;
+  };
+
+  type Component = Intergalactic.Component<'input', Props>;
+}
+
+export {
+  NSAutoSuggest,
+};
diff --git a/semcore/select/src/components/AutoSuggest/Highlight.tsx b/semcore/select/src/components/AutoSuggest/Highlight.tsx
new file mode 100644
index 0000000000..b7d7b80844
--- /dev/null
+++ b/semcore/select/src/components/AutoSuggest/Highlight.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+type HighlightProps = {
+  highlight: string;
+  children: string;
+};
+
+export function Highlight({ highlight, children }: HighlightProps) {
+  let html = children;
+  if (highlight) {
+    try {
+      const re = new RegExp(highlight.toLowerCase(), 'g');
+      html = html.replace(
+        re,
+        `<span style="font-weight: bold; padding: 2px 0">${highlight}</span>`,
+      );
+    } catch (e) {}
+  }
+  return <span dangerouslySetInnerHTML={{ __html: html }} />;
+}
diff --git a/semcore/select/src/index.d.ts b/semcore/select/src/index.d.ts
index ab57acb032..feb4a2bbbc 100644
--- a/semcore/select/src/index.d.ts
+++ b/semcore/select/src/index.d.ts
@@ -16,6 +16,8 @@ import type Input from '@semcore/input';
 import type { Text } from '@semcore/typography';
 import type React from 'react';
 
+import { NSAutoSuggest } from './components/AutoSuggest/AutoSuggest.type.ts';
+
 export type SelectInputSearch = InputValueProps & {};
 
 export type OptionValue = string | number;
@@ -170,5 +172,7 @@ declare const wrapSelect: <PropsExtending extends {}>(
   ) => React.ReactNode,
 ) => IntergalacticSelectComponent<PropsExtending>;
 
-export { InputSearch, wrapSelect };
+declare const AutoSuggest = NSAutoSuggest.Component;
+
+export { InputSearch, wrapSelect, AutoSuggest };
 export default Select;
diff --git a/semcore/select/src/index.js b/semcore/select/src/index.js
index 96e699c8ca..843f03a702 100644
--- a/semcore/select/src/index.js
+++ b/semcore/select/src/index.js
@@ -1,3 +1,4 @@
 export { default as InputSearch } from './InputSearch';
 export { default } from './Select';
 export * from './Select';
+export { AutoSuggest } from './components/AutoSuggest/AutoSuggest';
diff --git a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
index 6fd43d6406..95db403c1d 100644
--- a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
+++ b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
@@ -1,150 +1,81 @@
 import { Box } from '@semcore/ui/base-components';
-import Input from '@semcore/ui/input';
-import Select from '@semcore/ui/select';
+import { AutoSuggest } from '@semcore/ui/select';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
-const Highlight = ({ highlight, children }: { highlight: string; children: string }) => {
-  let html = children;
-  if (highlight) {
-    try {
-      const re = new RegExp(highlight.toLowerCase(), 'g');
-      html = html.replace(
-        re,
-        `<span style="font-weight: bold; padding: 2px 0">${highlight}</span>`,
-      );
-    } catch (e) {}
-  }
-  return <span dangerouslySetInnerHTML={{ __html: html }} />;
-};
+const suggestions = [
+  'persian',
+  'maine coon',
+  'ragdoll',
+  'sphynx',
+  'siamese',
+  'bengal',
+  'british shorthair',
+  'abyssinian',
+  'birman',
+  'oriental shorthair',
+  'scottish fold',
+  'devon rex',
+  'norwegian forest',
+  'siberian',
+  'russian blue',
+  'savannah',
+  'american shorthair',
+  'exotic shorthair',
+  'ragamuffin',
+  'balinese',
+];
 
-const debounce = (func: Function, timeout: number) => {
-  let timer: number;
-  return (...args: any[]) => {
-    window.clearTimeout(timer);
-    timer = window.setTimeout(() => {
-      func(...args);
-    }, timeout);
-  };
-};
+const fakeFetch = async (query: string, signal: AbortSignal): Promise<string[]> => {
+  if (!query) return [];
 
-type Suggestion = {
-  value: string;
-  title: string;
-};
+  if (signal.aborted) {
+    return [];
+  }
 
-const fakeFetch = async (query: string): Promise<Suggestion[]> => {
-  if (!query) return [];
+  return new Promise((resolve) => {
+    const onAbort = () => {
+      signal.removeEventListener('abort', onAbort);
+      resolve([]);
+    };
+    signal.addEventListener('abort', onAbort);
+
+    setTimeout(() => {
+      signal.removeEventListener('abort', onAbort);
 
-  return [
-    'persian',
-    'maine coon',
-    'ragdoll',
-    'sphynx',
-    'siamese',
-    'bengal',
-    'british shorthair',
-    'abyssinian',
-    'birman',
-    'oriental shorthair',
-    'scottish fold',
-    'devon rex',
-    'norwegian forest',
-    'siberian',
-    'russian blue',
-    'savannah',
-    'american shorthair',
-    'exotic shorthair',
-    'ragamuffin',
-    'balinese',
-  ]
-    .filter((breed) => breed.toLowerCase().includes(query.toLowerCase()))
-    .map((value) => ({ value, title: value }));
+      resolve(suggestions.filter((breed) => breed.toLowerCase().includes(query.toLowerCase())));
+    }, 2000);
+  });
 };
 
 const Demo = () => {
-  const [highlightedIndex, setHighlightedIndex] = React.useState<number | null>(-1);
-  const [visible, setVisible] = React.useState(false);
   const [query, setQuery] = React.useState('');
-  const [suggestions, setSuggestions] = React.useState<Suggestion[]>([]);
-  const [isEmptyQuery, setIsEmptyQuery] = React.useState(true);
-  const loadSuggestions = React.useCallback(
-    debounce(
-      (query: string) => fakeFetch(query).then((suggestions) => setSuggestions(suggestions)),
-      300,
-    ),
-    [],
-  );
-  React.useEffect(() => {
-    if (query === '') {
-      setSuggestions([]);
-      setIsEmptyQuery(true);
-    } else {
-      if (isEmptyQuery) {
-        setVisible(true);
-        setIsEmptyQuery(false);
-      }
-      loadSuggestions(query);
-    }
-  }, [query, isEmptyQuery]);
-  const handleSelect = React.useCallback((x: string) => {
-    setQuery(x);
-    setVisible(false);
-  }, []);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!e.key.startsWith('Array')) {
-      setHighlightedIndex(-1);
-    }
-  };
-
-  const handleHighlightedIndexChange = (index: number | null) => {
-    setHighlightedIndex(index);
-  };
-
-  const handleChangeVisible = (visible: boolean) => {
-    setVisible(visible);
-  };
 
   return (
     <>
-      <Text tag='label' size={200} htmlFor='website-autosuggest'>
-        Your pet breed
+      <Text tag='label' size={200} htmlFor='async-autosuggest'>
+        ASYNC Your pet breed
+      </Text>
+      <Box mt={2}>
+        <AutoSuggest
+          value={query}
+          id='async-autosuggest'
+          onChange={setQuery}
+          suggestions={fakeFetch}
+        />
+      </Box>
+      <br />
+      <br />
+      <Text tag='label' size={200} htmlFor='sync-autosuggest'>
+        SYNC Your pet breed
       </Text>
       <Box mt={2}>
-        <Select
-          interaction='focus'
-          onChange={handleSelect}
+        <AutoSuggest
           value={query}
-          visible={visible}
-          onVisibleChange={handleChangeVisible}
-          highlightedIndex={highlightedIndex}
-          onHighlightedIndexChange={handleHighlightedIndexChange}
-          defaultHighlightedIndex={null}
-        >
-          <Select.Trigger tag={Input} w={250}>
-            {() => (
-              <Input.Value
-                value={query}
-                role='combobox'
-                placeholder='Start typing for options'
-                onChange={setQuery}
-                id='website-autosuggest'
-                onKeyDown={handleKeyDown}
-                autoComplete='off'
-              />
-            )}
-          </Select.Trigger>
-          {suggestions.length > 0 && (
-            <Select.Menu>
-              {suggestions.map((option) => (
-                <Select.Option value={option.value} key={option.value} selected={false}>
-                  <Highlight highlight={query}>{option.title}</Highlight>
-                </Select.Option>
-              ))}
-            </Select.Menu>
-          )}
-        </Select>
+          id='sync-autosuggest'
+          onChange={setQuery}
+          suggestions={suggestions}
+        />
       </Box>
     </>
   );

From 1f60ee5dfba4a2783d28b699ded7b47fa61e7ddf Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Tue, 9 Jun 2026 15:30:11 +0200
Subject: [PATCH 03/14] [docs] updated illustration

---
 .../patterns/auto-suggest/static/start.png    | Bin 4973 -> 2973 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/website/docs/patterns/auto-suggest/static/start.png b/website/docs/patterns/auto-suggest/static/start.png
index f0b96a1fa2d088cc87271ef4ab7110124121f75c..586fa1def3c5a8d924d286c2a7d14d69bf399ca5 100644
GIT binary patch
literal 2973
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
TZN30`00000NkvXXu0mjfwzcE7

literal 4973
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


From b931767a54417ce97537b9ca88f23231a89f3d12 Mon Sep 17 00:00:00 2001
From: Sheila Sheikh <166654065+sheila-semrush@users.noreply.github.com>
Date: Tue, 9 Jun 2026 15:33:53 +0200
Subject: [PATCH 04/14] [stories] limited width for autosuggest example

---
 .../auto-suggest/docs/examples/autosuggest_example.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
index 95db403c1d..34f6a38ff8 100644
--- a/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
+++ b/stories/patterns/ux-patterns/auto-suggest/docs/examples/autosuggest_example.tsx
@@ -56,7 +56,7 @@ const Demo = () => {
       <Text tag='label' size={200} htmlFor='async-autosuggest'>
         ASYNC Your pet breed
       </Text>
-      <Box mt={2}>
+      <Box mt={2} w={300}>
         <AutoSuggest
           value={query}
           id='async-autosuggest'
@@ -69,7 +69,7 @@ const Demo = () => {
       <Text tag='label' size={200} htmlFor='sync-autosuggest'>
         SYNC Your pet breed
       </Text>
-      <Box mt={2}>
+      <Box mt={2} w={300}>
         <AutoSuggest
           value={query}
           id='sync-autosuggest'

From c61673a8e87fc0708ee95b191b8d75e5b296e90d Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Wed, 10 Jun 2026 09:49:55 +0200
Subject: [PATCH 05/14] [select] added states to autosuggest

---
 .../components/AutoSuggest/AutoSuggest.tsx    | 42 ++++++++++++-------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index 5d9c75ab2d..3f31997c9e 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -1,5 +1,6 @@
 import type { Intergalactic } from '@semcore/core';
 import { Component, createComponent, Root } from '@semcore/core';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import Input from '@semcore/input';
 import Spin from '@semcore/spin';
 import React from 'react';
@@ -10,8 +11,8 @@ import Select from '../../index';
 
 class AutoSuggestRoot extends Component<
   Intergalactic.InternalTypings.InferComponentProps<NSAutoSuggest.Component>,
-  [],
-  { value: string },
+  typeof AutoSuggestRoot.enhance,
+  { value: (value: string) => string },
   {},
   NSAutoSuggest.State,
   NSAutoSuggest.DefaultProps
@@ -20,6 +21,8 @@ class AutoSuggestRoot extends Component<
     defaultValue: '',
   };
 
+  static enhance = [uniqueIDEnhancement()] as const;
+
   private abortController: AbortController | undefined;
   private changeDebounce = 0;
 
@@ -54,7 +57,7 @@ class AutoSuggestRoot extends Component<
         this.setState({ isLoading: true });
       }
 
-      this.changeDebounce = setTimeout(async () => {
+      this.changeDebounce = window.setTimeout(async () => {
         this.handleChangeVisible(true);
 
         if (Array.isArray(suggestions)) {
@@ -103,8 +106,9 @@ class AutoSuggestRoot extends Component<
   };
 
   render() {
-    const { value } = this.asProps;
+    const { value, uid } = this.asProps;
     const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
+    const id = `${uid}_autosuggest-trigger`;
 
     return (
       <Select
@@ -115,7 +119,7 @@ class AutoSuggestRoot extends Component<
         onHighlightedIndexChange={this.handleChangeHighlightedIndex}
         defaultHighlightedIndex={null}
       >
-        <Select.Trigger tag={Input} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+        <Select.Trigger id={id} tag={Input} onFocus={this.handleFocus} onBlur={this.handleBlur}>
           <Root
             render={Input.Value}
             value={value}
@@ -129,15 +133,25 @@ class AutoSuggestRoot extends Component<
             <Input.Addon tag={Spin} size='l' />
           )}
         </Select.Trigger>
-        {suggestions.length > 0 && (
-          <Select.Menu>
-            {suggestions.map((option) => (
-              <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
-                <Highlight highlight={value}>{option}</Highlight>
-              </Select.Option>
-            ))}
-          </Select.Menu>
-        )}
+        <Select.Popper aria-labelledby={id}>
+          {isLoading
+            ? (<div>loading...</div>) /* todo use DD.StatusItem */
+            : (
+                <>
+                  {suggestions.length === 0
+                    ? (value.length > 0 && <div>start typing to see options</div>) /* todo use DD.StatusItem */
+                    : (
+                        <Select.List>
+                          {suggestions.map((option) => (
+                            <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
+                              <Highlight highlight={value}>{option}</Highlight>
+                            </Select.Option>
+                          ))}
+                        </Select.List>
+                      )}
+                </>
+              )}
+        </Select.Popper>
       </Select>
     );
   }

From dfe133d49e706bd1c41487f03cba6b93fb3ce392 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Wed, 10 Jun 2026 22:44:17 +0200
Subject: [PATCH 06/14] [select] added StatusItem to autoSuggest

---
 semcore/icon/package.json                             |  2 +-
 .../select/src/components/AutoSuggest/AutoSuggest.tsx | 11 ++++++-----
 semcore/select/src/translations/en.json               |  3 ++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/semcore/icon/package.json b/semcore/icon/package.json
index ff0eea93a6..66419506a0 100644
--- a/semcore/icon/package.json
+++ b/semcore/icon/package.json
@@ -4414,4 +4414,4 @@
       "require": "./lib/ZoomPlus/m/index.js"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index 3f31997c9e..1de81b371c 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -1,5 +1,6 @@
 import type { Intergalactic } from '@semcore/core';
 import { Component, createComponent, Root } from '@semcore/core';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import Input from '@semcore/input';
 import Spin from '@semcore/spin';
@@ -8,6 +9,7 @@ import React from 'react';
 import type { NSAutoSuggest } from './AutoSuggest.type';
 import { Highlight } from './Highlight';
 import Select from '../../index';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 
 class AutoSuggestRoot extends Component<
   Intergalactic.InternalTypings.InferComponentProps<NSAutoSuggest.Component>,
@@ -21,7 +23,7 @@ class AutoSuggestRoot extends Component<
     defaultValue: '',
   };
 
-  static enhance = [uniqueIDEnhancement()] as const;
+  static enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages)] as const;
 
   private abortController: AbortController | undefined;
   private changeDebounce = 0;
@@ -106,7 +108,7 @@ class AutoSuggestRoot extends Component<
   };
 
   render() {
-    const { value, uid } = this.asProps;
+    const { value, uid, getI18nText } = this.asProps;
     const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
     const id = `${uid}_autosuggest-trigger`;
 
@@ -124,7 +126,6 @@ class AutoSuggestRoot extends Component<
             render={Input.Value}
             value={value}
             role='combobox'
-            placeholder='Start typing for options'
             onChange={this.handleChange}
             onKeyDown={this.handleKeyDown}
             autoComplete='off'
@@ -135,11 +136,11 @@ class AutoSuggestRoot extends Component<
         </Select.Trigger>
         <Select.Popper aria-labelledby={id}>
           {isLoading
-            ? (<div>loading...</div>) /* todo use DD.StatusItem */
+            ? (<Select.StatusItem state='loading' />)
             : (
                 <>
                   {suggestions.length === 0
-                    ? (value.length > 0 && <div>start typing to see options</div>) /* todo use DD.StatusItem */
+                    ? (value.length === 0 && <Select.StatusItem itemsCount={0}>{getI18nText('AutoSuggest.Popper.placeholderText')}</Select.StatusItem>)
                     : (
                         <Select.List>
                           {suggestions.map((option) => (
diff --git a/semcore/select/src/translations/en.json b/semcore/select/src/translations/en.json
index a8a32c02d4..30c237891b 100644
--- a/semcore/select/src/translations/en.json
+++ b/semcore/select/src/translations/en.json
@@ -2,5 +2,6 @@
   "clearSearch": "Clear search field",
   "selectPlaceholder": "Select option",
   "Select.InputSearch.Value:placeholder": "Search",
-  "Select.InputSearch.Value:aria-label": "Search"
+  "Select.InputSearch.Value:aria-label": "Search",
+  "AutoSuggest.Popper.placeholderText": "Start typing to see options"
 }

From d37bcef9904476eba35674f31c6234ef1bdce193 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Fri, 12 Jun 2026 11:59:49 +0200
Subject: [PATCH 07/14] [select] fixed build

---
 pnpm-lock.yaml              | 5 ++++-
 semcore/select/package.json | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45e5ee755e..7d56a218a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1585,6 +1585,9 @@ importers:
       '@semcore/input':
         specifier: ^17.2.0
         version: link:../input
+      '@semcore/spin':
+        specifier: ^17.2.0
+        version: link:../spin
       '@semcore/typography':
         specifier: ^17.2.0
         version: link:../typography
@@ -19613,7 +19616,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.15))(terser@5.48.0)(yaml@2.8.3)
+      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.48.0)(yaml@2.8.3)
 
   '@vitest/utils@3.2.4':
     dependencies:
diff --git a/semcore/select/package.json b/semcore/select/package.json
index 254cfe7f06..fbcd24cce6 100644
--- a/semcore/select/package.json
+++ b/semcore/select/package.json
@@ -23,6 +23,7 @@
     "@semcore/dropdown": "^17.2.0",
     "@semcore/dropdown-menu": "^17.2.0",
     "@semcore/input": "^17.2.0",
+    "@semcore/spin": "^17.2.0",
     "@semcore/typography": "^17.2.0",
     "classnames": "2.2.6"
   },

From 5b0fa1d5c005a115e725523f3dd052f8830d1606 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Fri, 12 Jun 2026 15:39:32 +0200
Subject: [PATCH 08/14] [select] fixed visual issue with empty suggestions list

---
 semcore/select/src/components/AutoSuggest/AutoSuggest.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index 1de81b371c..97912a9a1c 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -112,10 +112,12 @@ class AutoSuggestRoot extends Component<
     const { isVisible, highlightedIndex, suggestions, isLoading } = this.state;
     const id = `${uid}_autosuggest-trigger`;
 
+    const isVisiblePopper = isVisible && (value === '' || suggestions.length > 0 || isLoading);
+
     return (
       <Select
         interaction='none'
-        visible={isVisible}
+        visible={isVisiblePopper}
         onVisibleChange={this.handleChangeVisible}
         highlightedIndex={highlightedIndex}
         onHighlightedIndexChange={this.handleChangeHighlightedIndex}

From 2f0ef633f4b5b7881730e32d359c8385e4e6efa8 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Fri, 12 Jun 2026 22:23:06 +0200
Subject: [PATCH 09/14] [dropdown, dropdown-menu, select] don't set focus to
 trigger with interaction none by default

---
 semcore/dropdown/src/AbstractDropdown.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/semcore/dropdown/src/AbstractDropdown.tsx b/semcore/dropdown/src/AbstractDropdown.tsx
index 439e53025e..b3320f0575 100644
--- a/semcore/dropdown/src/AbstractDropdown.tsx
+++ b/semcore/dropdown/src/AbstractDropdown.tsx
@@ -312,10 +312,10 @@ export abstract class AbstractDropdown extends Component<AbstractDDProps, typeof
   }
 
   componentDidUpdate(prevProps: AbstractDDProps) {
-    const { visible } = this.asProps;
+    const { visible, interaction } = this.asProps;
     const visibilityChanged = visible !== prevProps.visible;
 
-    if (visibilityChanged && !visible) {
+    if (visibilityChanged && !visible && interaction !== 'none') {
       this.handlers.highlightedIndex(this.props.defaultHighlightedIndex);
       this.prevHighlightedIndex = null;
       this.highlightedItem = null;

From ecd678ecbca1f8e79e243708476663bf61ae958d Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 15 Jun 2026 11:43:01 +0200
Subject: [PATCH 10/14] [select] fixed types

---
 semcore/select/src/components/AutoSuggest/AutoSuggest.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index 97912a9a1c..cbd9e0a98a 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -138,7 +138,7 @@ class AutoSuggestRoot extends Component<
         </Select.Trigger>
         <Select.Popper aria-labelledby={id}>
           {isLoading
-            ? (<Select.StatusItem state='loading' />)
+            ? (<Select.StatusItem state='loading' itemsCount={0} />)
             : (
                 <>
                   {suggestions.length === 0

From 61ddbd563e2b12599a0e9e912be7d7a6e9402a11 Mon Sep 17 00:00:00 2001
From: Valeryia Zimnitskaya <valeryia.zimnitskaya@semrush.com>
Date: Mon, 15 Jun 2026 12:55:51 +0200
Subject: [PATCH 11/14] [stories] add auto suggest test story

---
 .../tests/AutoSuggest.stories.tsx             |  35 ++++++
 .../tests/examples/autosuggest_test.tsx       | 112 ++++++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 stories/patterns/ux-patterns/auto-suggest/tests/AutoSuggest.stories.tsx
 create mode 100644 stories/patterns/ux-patterns/auto-suggest/tests/examples/autosuggest_test.tsx

diff --git a/stories/patterns/ux-patterns/auto-suggest/tests/AutoSuggest.stories.tsx b/stories/patterns/ux-patterns/auto-suggest/tests/AutoSuggest.stories.tsx
new file mode 100644
index 0000000000..47353fe9d3
--- /dev/null
+++ b/stories/patterns/ux-patterns/auto-suggest/tests/AutoSuggest.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import AutosuggestTestExample, { autosuggestTestDefaultProps } from './examples/autosuggest_test';
+import type { AutosuggestTestProps } from './examples/autosuggest_test';
+
+const meta: Meta = {
+  title: 'Patterns/UX Patterns/AutoSuggest/Tests',
+};
+export default meta;
+
+export const Autosuggest: StoryObj<AutosuggestTestProps> = {
+  render: AutosuggestTestExample,
+  args: autosuggestTestDefaultProps,
+  argTypes: {
+    suggestionsSource: {
+      control: { type: 'radio' },
+      options: ['sync', 'async'],
+    },
+    initialValue: {
+      control: 'text',
+    },
+    asyncDelay: {
+      control: { type: 'number', min: 0, step: 100 },
+    },
+    autoFocus: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 160, step: 20 },
+    },
+    placeholder: {
+      control: 'text',
+    },
+  },
+};
diff --git a/stories/patterns/ux-patterns/auto-suggest/tests/examples/autosuggest_test.tsx b/stories/patterns/ux-patterns/auto-suggest/tests/examples/autosuggest_test.tsx
new file mode 100644
index 0000000000..2f14073a20
--- /dev/null
+++ b/stories/patterns/ux-patterns/auto-suggest/tests/examples/autosuggest_test.tsx
@@ -0,0 +1,112 @@
+import { Box } from '@semcore/ui/base-components';
+import { AutoSuggest } from '@semcore/ui/select';
+import { Text } from '@semcore/ui/typography';
+import React from 'react';
+
+const suggestions = [
+  'Persian',
+  'Maine Coon',
+  'Ragdoll',
+  'Sphynx',
+  'Siamese',
+  'Bengal',
+  'British Shorthair',
+  'Abyssinian',
+  'Birman',
+  'Oriental Shorthair',
+  'Scottish Fold',
+  'Devon Rex',
+  'Norwegian Forest',
+  'Siberian',
+  'Russian Blue',
+  'Savannah',
+  'American Shorthair',
+  'Exotic Shorthair',
+  'Ragamuffin',
+  'Balinese',
+];
+
+export type AutosuggestTestProps = {
+  suggestionsSource?: 'sync' | 'async';
+  initialValue?: string;
+  asyncDelay?: number;
+  autoFocus?: boolean;
+  width?: number;
+  placeholder?: string;
+};
+
+export const autosuggestTestDefaultProps: Required<AutosuggestTestProps> = {
+  suggestionsSource: 'sync',
+  initialValue: '',
+  asyncDelay: 1000,
+  autoFocus: false,
+  width: 250,
+  placeholder: 'Start typing to see options',
+};
+
+const fakeFetch = async (query: string, signal: AbortSignal, delay: number): Promise<string[]> => {
+  if (!query) return [];
+
+  if (signal.aborted) {
+    return [];
+  }
+
+  return new Promise((resolve) => {
+    const onAbort = () => {
+      signal.removeEventListener('abort', onAbort);
+      resolve([]);
+    };
+    signal.addEventListener('abort', onAbort);
+
+    setTimeout(() => {
+      signal.removeEventListener('abort', onAbort);
+
+      resolve(suggestions.filter((breed) => breed.toLowerCase().includes(query.toLowerCase())));
+    }, delay);
+  });
+};
+
+const Demo = (props: AutosuggestTestProps) => {
+  const {
+    suggestionsSource,
+    initialValue,
+    asyncDelay,
+    autoFocus,
+    width,
+    placeholder,
+  } = {
+    ...autosuggestTestDefaultProps,
+    ...props,
+  };
+  const [query, setQuery] = React.useState(initialValue);
+
+  React.useEffect(() => {
+    setQuery(initialValue);
+  }, [initialValue]);
+
+  const getSuggestions = React.useCallback(
+    (query: string, signal: AbortSignal) => fakeFetch(query, signal, asyncDelay),
+    [asyncDelay],
+  );
+
+  return (
+    <>
+      <Text tag='label' size={200} htmlFor='autosuggest'>
+        Your pet breed
+      </Text>
+      <Box mt={2} w={width}>
+        <AutoSuggest
+          key={`${suggestionsSource}-${initialValue}-${asyncDelay}-${autoFocus}`}
+          value={query}
+          id='autosuggest'
+          onChange={setQuery}
+          suggestions={suggestionsSource === 'async' ? getSuggestions : suggestions}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default Demo;

From 93dc2748657c54f3b9a134ad74580eda6d574d74 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 15 Jun 2026 14:02:43 +0200
Subject: [PATCH 12/14] [select] fixed onClick handler

---
 semcore/select/src/Select.jsx                          |  2 +-
 .../select/src/components/AutoSuggest/AutoSuggest.tsx  | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx
index d48b1d4e7b..b6c7e9f02e 100644
--- a/semcore/select/src/Select.jsx
+++ b/semcore/select/src/Select.jsx
@@ -222,7 +222,7 @@ class RootSelect extends AbstractDropdown {
       'aria-selected': selected ? 'true' : 'false',
       'aria-disabled': props.disabled ? 'true' : 'false',
       'role': 'option',
-      'onClick': this.bindHandlerOptionClick(props.value, index),
+      'onClick': callAllEventHandlers(props.onClick, this.bindHandlerOptionClick(props.value, index)),
       'ref': (node) => this.itemRef(props, index, node),
       size,
     };
diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index cbd9e0a98a..0e503579bc 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -146,7 +146,15 @@ class AutoSuggestRoot extends Component<
                     : (
                         <Select.List>
                           {suggestions.map((option) => (
-                            <Select.Option value={option} key={option} selected={false} onClick={() => this.handleChangeSelect(option)}>
+                            <Select.Option
+                              value={option}
+                              key={option}
+                              selected={false}
+                              onClick={() => {
+                                this.handleChangeSelect(option);
+                                return false;
+                              }}
+                            >
                               <Highlight highlight={value}>{option}</Highlight>
                             </Select.Option>
                           ))}

From ac2d11b8fdf152553c100a7467c78ec83c667a1b Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 15 Jun 2026 14:06:02 +0200
Subject: [PATCH 13/14] [select] added case-insensitive to Highlight regexp

---
 semcore/select/src/components/AutoSuggest/Highlight.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/semcore/select/src/components/AutoSuggest/Highlight.tsx b/semcore/select/src/components/AutoSuggest/Highlight.tsx
index eff9b7c76f..c0f5c0ed8a 100644
--- a/semcore/select/src/components/AutoSuggest/Highlight.tsx
+++ b/semcore/select/src/components/AutoSuggest/Highlight.tsx
@@ -9,7 +9,7 @@ export function Highlight({ highlight, children }: HighlightProps) {
   let html = children;
   if (highlight) {
     try {
-      const re = new RegExp(highlight.toLowerCase(), 'g');
+      const re = new RegExp(highlight.toLowerCase(), 'ig');
       html = html.replace(
         re,
         `<span style="font-weight: bold; padding: var(--intergalactic-spacing-05x, 2px) 0">${highlight}</span>`,

From 1c3bd5b03cc3c085dde5c17c3b55190b06607de1 Mon Sep 17 00:00:00 2001
From: "ilia.brauer" <ilia.brauer@semrush.com>
Date: Mon, 15 Jun 2026 15:57:42 +0200
Subject: [PATCH 14/14] [select] try to debug autocomplete

---
 semcore/select/src/Select.jsx                             | 2 +-
 semcore/select/src/components/AutoSuggest/AutoSuggest.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx
index b6c7e9f02e..d48b1d4e7b 100644
--- a/semcore/select/src/Select.jsx
+++ b/semcore/select/src/Select.jsx
@@ -222,7 +222,7 @@ class RootSelect extends AbstractDropdown {
       'aria-selected': selected ? 'true' : 'false',
       'aria-disabled': props.disabled ? 'true' : 'false',
       'role': 'option',
-      'onClick': callAllEventHandlers(props.onClick, this.bindHandlerOptionClick(props.value, index)),
+      'onClick': this.bindHandlerOptionClick(props.value, index),
       'ref': (node) => this.itemRef(props, index, node),
       size,
     };
diff --git a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
index 0e503579bc..21ba2db80c 100644
--- a/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
+++ b/semcore/select/src/components/AutoSuggest/AutoSuggest.tsx
@@ -44,6 +44,13 @@ class AutoSuggestRoot extends Component<
     };
   }
 
+  componentDidMount(): void {
+    document.addEventListener('click', (e) => {
+      // eslint-disable-next-line no-console
+      console.log(e.target, e.currentTarget);
+    });
+  }
+
   handleChange = (value: string) => {
     if (this.changeDebounce) {
       clearTimeout(this.changeDebounce);
@@ -152,7 +159,6 @@ class AutoSuggestRoot extends Component<
                               selected={false}
                               onClick={() => {
                                 this.handleChangeSelect(option);
-                                return false;
                               }}
                             >
                               <Highlight highlight={value}>{option}</Highlight>