UIEH-1439: Pass the �syncFilter property to the Selection component o…

…f packages.

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Return permissions: `kb-ebsco.kb-credentials.uc.item.get`, `kb-ebsco.kb-credentials.item.get`. (UIEH-1434)
 * migrate to shared CI workflows. (UIEH-1429)
 * Rename permissions to match the naming convention. (UIEH-1436)
+* Pass the `asyncFilter` property to the `Selection` component of packages. (UIEH-1439)
 
 ## [9.1.1] (https://github.com/folio-org/ui-eholdings/tree/v9.1.1) (2024-03-24)
 

src/components/title/_fields/package-select/package-select-field.js

@@ -15,7 +15,7 @@ function validate(value) {
   return value ? undefined : <FormattedMessage id="ui-eholdings.validate.errors.packageSelect.required" />;
 }
 
-const FILTER_DEBOUNCE_MS = 1000;
+const FILTER_DEBOUNCE_MS = 800;
 
 const PackageSelectField = ({
   options,
@@ -47,6 +47,7 @@ const PackageSelectField = ({
         placeholder={intl.formatMessage({ id: 'ui-eholdings.title.chooseAPackage' })}
         dataOptions={options.filter(option => option.label && !option.disabled)}
         required
+        asyncFilter
         onFilter={handleFilter}
         data-testid="package-select-field"
         loading={loadingOptions}

src/components/title/_fields/package-select/package-select-field.test.js

@@ -75,7 +75,7 @@ describe('Given PackageSelectField', () => {
     const input = getAllByLabelText('stripes-components.selection.filterOptionsLabel')[0];
 
     fireEvent.change(input, { target: { value: 'packageName' } });
-    expect(debounce).toHaveBeenCalledWith(mockOnFilter, 1000);
+    expect(debounce).toHaveBeenCalledWith(mockOnFilter, 800);
     expect(mockOnFilter).toHaveBeenCalled();
   });
 });