@sproutsocial/seeds-react-menu 1.6.1 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/Autocomplete/AutocompleteTypes.ts

@@ -16,6 +16,7 @@ export type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps &
     /** Set multiSelect to true to allow multiple selections.
      *  Default: false*/
     multiSelect?: boolean;
+    autoCloseOnEmpty?: boolean;
   };
 
 export type TypeSingleAutocompleteProps<

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -37,6 +37,7 @@ export const MultiAutocomplete = <
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
+  autoCloseOnEmpty = true,
   ...useComboboxProps
 }: TypeMultiAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -175,6 +176,7 @@ export const MultiAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         initialSelectedItems,
@@ -192,7 +194,6 @@ export const MultiAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -20,6 +20,7 @@ export const SingleAutocomplete = <
   MenuItemComponent,
   itemToString = defaultItemToString,
   getIsItemVisible,
+  autoCloseOnEmpty = true,
   ...useComboboxProps
 }: TypeSingleAutocompleteProps<I>) => {
   /** Get a list of menuItems and children */
@@ -63,6 +64,7 @@ export const SingleAutocomplete = <
     <MenuRootComponent
       {...{
         isListbox: true,
+        autoCloseOnEmpty,
         items: allMenuItems,
         itemToString,
         ...useComboboxProps,
@@ -73,7 +75,6 @@ export const SingleAutocomplete = <
         focusOnContent: false,
         ...userPopoutProps,
       }}
-      autoCloseOnEmpty
     >
       {children}
     </MenuRootComponent>

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -174,7 +174,7 @@ describe("Autocomplete Component", () => {
     expect(customFilter).toHaveBeenCalled();
   });
 
-  it("should close the dropdown when no items match the input", async () => {
+  it("should close the dropdown when no items match the input by default", async () => {
     const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
     const inputElement = screen.getByRole("combobox");
 
@@ -184,11 +184,26 @@ describe("Autocomplete Component", () => {
     });
 
     await waitFor(() => {
-      const listbox = screen.queryByRole("listbox");
-      expect(listbox).not.toBeInTheDocument();
+      const emptyState = screen.queryByText("No items found");
+      expect(emptyState).not.toBeInTheDocument();
     });
   });
 
+  it("should not close the dropdown when no items match the input if supplied autoCloseOnEmpty={false}", async () => {
+    const { user } = render(
+      <Autocomplete {...defaultAutocompleteProps} autoCloseOnEmpty={false} />
+    );
+    const inputElement = screen.getByRole("combobox");
+
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "something not in the list");
+    });
+
+    const emptyState = screen.getByText("No items found");
+    expect(emptyState).toBeInTheDocument();
+  });
+
   it("should apply custom popoutProps.width to the popout container", async () => {
     const { user } = render(
       <Autocomplete