feat(UIKIT-1108,Autocomplete): Popover скрыт, если пользователь ничег…

…о не ввел, либо отсутствуют options (#1158) Co-authored-by: Andrey Zaitsev <zaytsev_aa@astralnalog.ru>
kaluga-astral · Sep 23, 2024 · 0b3defc · 0b3defc
1 parent 1274e15
commit 0b3defc
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 28 deletions.
diff --git a/packages/components/src/Autocomplete/Autocomplete.stories.tsx b/packages/components/src/Autocomplete/Autocomplete.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { type SyntheticEvent, useState } from 'react';
 
 import { Tooltip } from '../Tooltip';
 import { Tag } from '../Tag';
@@ -219,18 +219,28 @@ export const Small = () => (
   </Wrapper>
 );
 
-export const NoData = () => (
-  <Wrapper>
-    <Autocomplete<Option, true, false, false>
-      label="No data"
-      size="small"
-      multiple
-      options={[]}
-      getOptionLabel={(params) => params.title}
-      required
-    />
-  </Wrapper>
-);
+export const NoData = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputValueChange = (_: SyntheticEvent, value: string) => {
+    setInputValue(value);
+  };
+
+  return (
+    <Wrapper>
+      <Autocomplete<Option, true, false, false>
+        label="No data"
+        size="small"
+        multiple
+        options={[]}
+        onInputChange={handleInputValueChange}
+        inputValue={inputValue}
+        getOptionLabel={(params) => params.title}
+        required
+      />
+    </Wrapper>
+  );
+};
 
 export const CustomRenderOption = () => (
   <Wrapper>

diff --git a/packages/components/src/Autocomplete/Autocomplete.test.tsx b/packages/components/src/Autocomplete/Autocomplete.test.tsx
@@ -7,7 +7,36 @@ import { TextField } from '../TextField';
 import { Autocomplete } from './Autocomplete';
 
 describe('Autocomplete', () => {
-  it('Popover не отображается пои фокусе на инпут', async () => {
+  it('Popover не отображается при клике на инпут, если inputValue пуст, а опций для выбора нет', async () => {
+    renderWithTheme(<Autocomplete options={[]} inputValue="" />);
+    await userEvents.click(screen.getByRole('combobox'));
+
+    const noDataPlaceholder = screen.queryByText('Нет данных');
+
+    expect(noDataPlaceholder).toBeNull();
+  });
+
+  it('Popover отображается при клике на инпут, если есть опции для выбора, но inputValue пуст', async () => {
+    type Option = { name: string; surname: string };
+
+    const options: Option[] = [{ name: 'Vasya', surname: 'Pupkin' }];
+
+    renderWithTheme(
+      <Autocomplete<Option, false, false, false>
+        options={options}
+        inputValue=""
+        getOptionLabel={(option) => option.surname}
+      />,
+    );
+
+    await userEvents.click(screen.getByRole('combobox'));
+
+    const expectedOption = screen.getByText('Pupkin');
+
+    expect(expectedOption).toBeVisible();
+  });
+
+  it('Popover не отображается при фокусе на инпут', async () => {
     renderWithTheme(<Autocomplete options={[]} />);
     fireEvent.focus(screen.getByRole('combobox'));
 

diff --git a/packages/components/src/Autocomplete/Autocomplete.tsx b/packages/components/src/Autocomplete/Autocomplete.tsx
@@ -112,8 +112,13 @@ const AutocompleteInner = <
   >,
   ref?: ForwardedRef<unknown>,
 ) => {
-  const isEmpty = checkIsInputEmpty(restProps.value);
+  const { inputValue, options, loading } = restProps;
+  const isInputValueNotEmpty =
+    inputValue !== undefined && inputValue.length >= 1;
+  const isOptionsAvailable = options.length > 0;
+  const isPopperVisible = isInputValueNotEmpty || isOptionsAvailable || loading;
 
+  const isEmpty = checkIsInputEmpty(restProps.value);
   const disableClearable = isEmpty || Boolean(externalDisableClearable);
 
   const renderDefaultTags = useCallback(
@@ -220,19 +225,21 @@ const AutocompleteInner = <
       multiple={multiple}
       getOptionLabel={getOptionLabel}
       disableCloseOnSelect={multiple}
-      PopperComponent={({ children, ...rest }) => (
-        <MuiPopper {...rest}>
-          {isLoadedDataError ? (
-            <PopperWrapper>
-              <Typography variant="body1" color="grey" colorIntensity="600">
-                {loadedDataError}
-              </Typography>
-            </PopperWrapper>
-          ) : (
-            children
-          )}
-        </MuiPopper>
-      )}
+      PopperComponent={({ children, ...rest }) => {
+        return isPopperVisible ? (
+          <MuiPopper {...rest}>
+            {isLoadedDataError ? (
+              <PopperWrapper>
+                <Typography variant="body1" color="grey" colorIntensity="600">
+                  {loadedDataError}
+                </Typography>
+              </PopperWrapper>
+            ) : (
+              children
+            )}
+          </MuiPopper>
+        ) : null;
+      }}
       renderTags={renderTags ?? renderDefaultTags}
       renderInput={renderInput}
       renderOption={renderOption}