Merge pull request #2649 from epam/pickerInout-minCharsToSearch-fix-u…

…nnessesary-api-call [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body
epam · Nov 20, 2024 · d1fc851 · d1fc851
2 parents 71e225c + e0aa959
commit d1fc851
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,10 @@
+# 5.xx.xx - xx.xx.2024
+
+**What's New**
+
+**What's Fixed**
+* [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body.
+
 # 5.11.0 - 15.11.2024
 
 **What's New**

diff --git a/uui-components/src/pickers/hooks/usePickerInput.ts b/uui-components/src/pickers/hooks/usePickerInput.ts
@@ -52,7 +52,9 @@ export function usePickerInput<TItem, TId, TProps>(props: UsePickerInputProps<TI
 
     const shouldShowBody = () => (props.shouldShowBody ?? defaultShouldShowBody)();
 
-    const showSelectedOnly = !shouldShowBody() || pickerInputState.showSelected;
+    const shouldLoadList = () => isSearchLongEnough() && shouldShowBody();
+
+    const showSelectedOnly = !shouldLoadList() || pickerInputState.showSelected;
 
     const picker = usePicker<TItem, TId, UsePickerInputProps<TItem, TId, TProps>>({ ...props, showSelectedOnly }, pickerInputState);
     const {

diff --git a/uui/components/pickers/__tests__/PickerInput.test.tsx b/uui/components/pickers/__tests__/PickerInput.test.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ArrayDataSource, CascadeSelection } from '@epam/uui-core';
+import { ArrayDataSource, CascadeSelection, LazyDataSource } from '@epam/uui-core';
 import {
     renderSnapshotWithContextAsync, setupComponentForTest, screen, within, fireEvent, waitFor, userEvent, PickerInputTestObject, act,
     delayAct,
@@ -1411,25 +1411,20 @@ describe('PickerInput', () => {
         console.error = prevConsoleError;
     });
 
-    it('should render message in body for not enough chars in search while using minCharsToSearch', async () => {
-        const mockEmptyDS = new ArrayDataSource<TestItemType, number, any>({
-            items: [],
+    it('should not load items while search less than minCharsToSearch', async () => {
+        const apiMock = jest.fn().mockResolvedValue([]);
+
+        const mockEmptyDS = new LazyDataSource<TestItemType, number, any>({
+            api: apiMock,
             getId: ({ id }) => id,
         });
 
-        const customText = 'Custom Text or Component';
-
         const { dom } = await setupPickerInputForTest({
             value: undefined,
             selectionMode: 'multi',
             minCharsToSearch: 3,
             searchPosition: 'body',
             dataSource: mockEmptyDS,
-            renderNotFound: () => (
-                <FlexCell grow={ 1 } textAlign="center" rawProps={ { 'data-testid': 'test-custom-not-found' } }>
-                    <Text>{customText}</Text>
-                </FlexCell>
-            ),
             getSearchFields: (item) => [item!.level],
         });
 
@@ -1443,6 +1438,24 @@ describe('PickerInput', () => {
             const notFound = within(await screen.findByRole('dialog'));
             expect(notFound.getByText('Type search to load items')).toBeInTheDocument();
         });
+
+        expect(apiMock).toBeCalledTimes(0);
+
+        const bodyInput = within(dialog).getByPlaceholderText('Search');
+
+        jest.useFakeTimers();
+        fireEvent.change(bodyInput, { target: { value: '1234' } });
+        act(() => {
+            jest.runAllTimers();
+        });
+        jest.useRealTimers();
+
+        await waitFor(async () => {
+            const notFound = within(await screen.findByRole('dialog'));
+            expect(notFound.getByText('No records found')).toBeInTheDocument();
+        });
+
+        expect(apiMock).toBeCalledTimes(1);
     });
 
     it('should render custom renderEmpty', async () => {