feat(DATAUI-3610): add suggest by getDimaMal · Pull Request #2596 · gravity-ui/uikit

getDimaMal · 2026-02-26T16:20:18Z

No description provided.

gravity-ui · 2026-02-26T16:22:55Z

Preview is ready.

gravity-ui · 2026-02-26T16:25:44Z

🎭 Component Tests Report is ready.

ogonkov · 2026-03-02T11:47:31Z

I guess input should have clear button?

Ruminat · 2026-03-05T13:45:08Z

+import {Flex} from '../layout';
+
+export type SuggestProps<T> = TextInputProps & {
+    items?: ListItemData<T>[];


I would expect Suggest being almost identical to Select in almost every aspect except for the trigger (which is TextInput in this case) and the lack of filter in Popup

So the property should be called options and other props should be copied as is as well (with some exceptions)

I would expect the same visuals and behaviors as well

@amje what do you think?

There's also an inline mode in common's Suggest. Do you plan do add it as well?

@Ruminat Which props do you want to copy? I agree with the naming of items

@korvin89 These, I guess:

// at least these props, I guess Pick<SelectProps, | "onUpdate" | "renderOption" | "renderOptionGroup" | "renderEmptyOptions" | "renderPopup" | "renderCounter" | "getOptionHeight" | "getOptionGroupHeight" | "value" | "defaultValue" | "options" | "error" | "errorMessage" | "errorPlacement" | "validationState" | "multiple" | "filter" | "onFilterChange" | "disablePortal" | "loading" | "onLoadMore" | "id" | "hasCounter" | "renderCounter" | "disabled" > // Would like to see these ones as well type NiceToHaveProps = { readonly?: boolean; inline?: boolean; };

korvin89 · 2026-03-10T10:40:58Z

Please add readme-ru like the other components

korvin89 · 2026-03-10T10:46:27Z

+    popupClassName?: PopupProps['className'];
+    popupPlacement?: PopupProps['placement'];
+    popupQa?: PopupProps['qa'];
+    popupWidth?: 'fit' | 'auto' | number;


Let's make an interface here like in Select

uikit/src/components/Select/types.ts

Line 115 in 436ad28

popupWidth?: 'fit' | number;

korvin89 · 2026-03-11T14:16:55Z

+import {Flex} from '../layout';
+
+export type SuggestProps<T> = TextInputProps & {
+    items?: ListItemData<T>[];


Let's probably call it options like in Select

korvin89 · 2026-03-11T14:17:48Z

+
+export type SuggestProps<T> = TextInputProps & {
+    items?: ListItemData<T>[];
+    onItemClick?: ListProps<T>['onItemClick'];


Accordingly, this is onOptionClick

korvin89 · 2026-03-11T14:18:16Z

+    popupPlacement?: PopupProps['placement'];
+    popupQa?: PopupProps['qa'];
+    popupWidth?: 'fit' | 'auto' | number;
+    renderItem?: ListProps<T>['renderItem'];


renderItem -> renderOption

korvin89 · 2026-03-11T14:21:11Z

+    ref: React.Ref<HTMLSpanElement>,
+) {
+    const listRef = React.useRef<List<T>>(null);
+    const [open, setOpen] = React.useState(false);


Let's use useOpenState here

uikit/src/hooks/useSelect/useOpenState.ts

Line 7 in cfa96d8

export const useOpenState = (props: UseOpenProps) => {

korvin89 · 2026-03-11T14:24:09Z

+        [textInputProps],
+    );
+
+    const handleKeyDown = React.useCallback(


It's probably worth processing the esc click here

korvin89 · 2026-03-11T15:00:55Z

The component implements a classic combobox pattern (text input + popup list), but the required ARIA markup is missing entirely.

At minimum, the TextInput should receive:

<TextInput
  controlProps={{
    role: 'combobox',
    'aria-expanded': open,
    'aria-controls': popupId,
    'aria-autocomplete': 'list',
    'aria-activedescendant': activeIndex !== undefined
      ? `${popupId}-item-${activeIndex}`
      : undefined,
  }}

  ...

<Popup id={popupId} ...>
  <List .../>
</Popup>
/>

amje · 2026-03-14T12:46:33Z

@@ -0,0 +1 @@
+export {Suggest} from './Suggest';


export SuggestProps

amje · 2026-03-14T12:47:42Z

+import {Suggest} from '@gravity-ui/uikit';
+```
+
+`Suggest` is a lightweight building block for “type to filter + popup list” scenarios. It renders a `TextInput` and a


Add this sentence please: Suggest is a basic implementation of "combobox" pattern

amje · 2026-03-14T12:49:58Z

+`Suggest` supports all `TextInput` props. The table below lists the props specific to `Suggest`:
+
+| Name           | Description                                         | Default | Type                                                   |
+| :------------- | :-------------------------------------------------- | :------ | :----------------------------------------------------- |


Please use the same table structure as in all other readmes: Name, Description, Type, Default, where Type and Default are center aligned

amje · 2026-03-14T12:53:36Z

+| Name           | Description                                         | Default | Type                                                   |
+| :------------- | :-------------------------------------------------- | :------ | :----------------------------------------------------- |
+| items          | Items rendered by `List`                            |         | `Array<ListItemData<T>>`                               |
+| onItemClick    | Fires when list item is clicked                     |         | `ListProps<T>['onItemClick']`                          |


Maybe we shouldn't expose List types, it will be deprecated soon, lets' just copy them

amje · 2026-03-14T12:55:47Z

There is no point of showing popup with no list:

amje · 2026-03-14T12:57:42Z

+    title: 'Components/Inputs/Suggest',
+    component: Suggest,
+    argTypes: {},
+    parameters: {},


This breaks the story. Controls are not interactive:

amje · 2026-03-14T12:59:01Z

+};
+
+export const Default: Story = {
+    render: () => {


You should pass args from here to the component props

amje · 2026-03-14T12:59:22Z

+        const items = React.useMemo(() => baseFilter(value), [value]);
+        const handelItemClick = React.useCallback((item: TItem) => {
+            setValue(item.content);
+            console.log('onItemClick', item);


Instead of using console.log use Storybook's dedicated actions

amje · 2026-03-14T12:59:58Z

+    render: () => {
+        const [value, setValue] = React.useState('');
+        return (
+            <Flex direction="column" gap={4}>


For stories layout we have Showcase* components. Please use them

amje · 2026-03-14T13:02:40Z

+                onUpdate={setValue}
+                placeholder="Search..."
+                renderItem={(item) => <div>{item.content}</div>}
+                value={value}


Instead of repeating props, utilize Storybook's args for story. Pass common props to the Default story, and then reuse them in other stories. See Button's stories as a reference

amje · 2026-03-14T13:04:49Z

You should rebase main branch, test names are different now

amje · 2026-03-14T13:10:52Z

+        const smokeScenarios = createSmokeScenarios<TestSuggestProps>(defaultProps, {
+            size: ['s', 'm', 'l', 'xl'],
+            disabled: [true],
+            hasClear: [true],


That's incorrect usage. Please follow the same structure as in other tests

amje · 2026-03-14T13:11:34Z

+        await expectScreenshot({themes: ['light']});
+    });
+
+    test('smoke opened', {tag: ['@smoke']}, async ({mount, page, expectScreenshot}) => {


Why it's a separate smoke test?

amje · 2026-03-14T13:13:11Z

+        await expectScreenshot({themes: ['light']});
+    });
+
+    test('smoke customPopup', {tag: ['@smoke']}, async ({mount, page, expectScreenshot}) => {


That's not a smoke test. Smoke test is just simple snapshot of props combinations. For custom popup do a normal visual test

getDimaMal requested review from ValeraS, amje and korvin89 as code owners February 26, 2026 16:20

getDimaMal force-pushed the feat/DATAUI-3610_add-suggest branch 5 times, most recently from ca4d0eb to 869d946 Compare February 27, 2026 12:32

getDimaMal requested a review from ogonkov as a code owner March 2, 2026 11:41

getDimaMal force-pushed the feat/DATAUI-3610_add-suggest branch from 313deb2 to 190b2ee Compare March 2, 2026 11:42

ogonkov reviewed Mar 2, 2026

View reviewed changes

getDimaMal force-pushed the feat/DATAUI-3610_add-suggest branch 3 times, most recently from c4dbafd to 81f826b Compare March 4, 2026 18:04

getDimaMal requested review from Arucard89, DakEnviy, IsaevAlexandr, Lunory, Marginy605, NasgulNexus, Raubzeug, Ruminat, bityutskiyAO, dvortsovs, jhoncool, mournfulCoroner, sofiushko and zamkovskaya as code owners March 4, 2026 18:04

Ruminat reviewed Mar 5, 2026

View reviewed changes

Malyshev added 12 commits March 6, 2026 10:45

feat(DATAUI-3610): add suggest

ab52156

feat(DATAUI-3610): add stories for suggest

ef125d9

feat(DATAUI-3610): add docs

09470f6

feat(DATAUI-3610): add tests

ba6cba9

feat(DATAUI-3610): add snapshot tests

d6921cc

feat(DATAUI-3610): add snapshot tests

ff4099d

feat(DATAUI-3610): update stories

5804b7d

feat(DATAUI-3610): update unit tests

18135bc

feat(DATAUI-3610): update props

99f4178

feat(DATAUI-3610): update tests

cce2366

feat(DATAUI-3610): update visual tests

810172f

feat(DATAUI-3610): fix

6e9ebd7

getDimaMal force-pushed the feat/DATAUI-3610_add-suggest branch from eba7320 to 6e9ebd7 Compare March 10, 2026 08:33

feat(DATAUI-3610): update tests

79cba7f

getDimaMal force-pushed the feat/DATAUI-3610_add-suggest branch from eaae402 to 79cba7f Compare March 10, 2026 09:11

korvin89 reviewed Mar 11, 2026

View reviewed changes

amje reviewed Mar 14, 2026

View reviewed changes

DaryaLari removed request for DaryaLari, Estasie, KostyaAvtushko, Marginy605, dvortsovs, igor0226, mournfulCoroner, v4dyar4 and zamkovskaya March 14, 2026 12:59

amje requested changes Mar 14, 2026

View reviewed changes

Conversation

getDimaMal commented Feb 26, 2026

Uh oh!

gravity-ui Bot commented Feb 26, 2026

Uh oh!

gravity-ui Bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Ruminat Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

korvin89 commented Mar 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amje commented Mar 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gravity-ui Bot commented Feb 26, 2026 •

edited

Loading

Ruminat Mar 6, 2026 •

edited

Loading