fix(select): hideEmptyContent API (#4219)

* fix(select): hideEmptyContent API

* test(select): hideEmptyContent tests

* docs(select): hideEmptyContent API

* chore(select): hideEmptyContent storybook

* chore(changeset): add hideEmptyContent API to select

* refactor(select): hideEmptyContent nitpick

* test(select): hideEmptyContent UI assertions

* fix(select): hideEmptyContent default false

* docs(select): hideEmptyContent default false

.changeset/rotten-jobs-pull.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/select": patch
+---
+
+add hideEmptyContent API to select

apps/docs/content/docs/components/select.mdx

@@ -485,7 +485,7 @@ the popover and listbox components.
     },
     {
       attribute: "endContent",
-      type: "ReactNode", 
+      type: "ReactNode",
       description: "Element to be rendered in the right side of the select.",
       default: "-"
     },
@@ -515,7 +515,7 @@ the popover and listbox components.
     },
     {
       attribute: "itemHeight",
-      type: "number", 
+      type: "number",
       description: "The fixed height of each item in pixels. Required when using virtualization.",
       default: "32"
     },
@@ -603,6 +603,12 @@ the popover and listbox components.
       description: "Whether the select should disable the rotation of the selector icon.",
       default: "false"
     },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether the listbox will be prevented from opening when there are no items.",
+      default: "false"
+    },
     {
       attribute: "popoverProps",
       type: "PopoverProps",

packages/components/select/__tests__/select.test.tsx

@@ -828,6 +828,57 @@ describe("Select", () => {
       "Invalid value",
     );
   });
+
+  it("should not open dropdown when hideEmptyContent is true", async () => {
+    const wrapper = render(
+      <Select
+        hideEmptyContent
+        aria-label="Favorite Animal"
+        data-testid="hide-empty-content-true-test"
+        label="Favorite Animal"
+      >
+        {[]}
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("hide-empty-content-true-test");
+
+    // open the select dropdown
+    await user.click(select);
+
+    // assert that the select is not open
+    expect(select).not.toHaveAttribute("aria-expanded", "true");
+    // assert that the listbox is not rendered
+    expect(wrapper.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("should open dropdown when hideEmptyContent is false", async () => {
+    const wrapper = render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="hide-empty-content-false-test"
+        hideEmptyContent={false}
+        label="Favorite Animal"
+      >
+        {[]}
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("hide-empty-content-false-test");
+
+    // open the select dropdown
+    await user.click(select);
+
+    // assert that the select is open
+    expect(select).toHaveAttribute("aria-expanded", "true");
+
+    const listbox = wrapper.getByRole("listbox");
+
+    // assert that the listbox is rendered
+    expect(listbox).toBeInTheDocument();
+    // assert that the listbox items are not rendered
+    expect(wrapper.queryByRole("option")).not.toBeInTheDocument();
+  });
 });
 
 describe("Select virtualization tests", () => {

packages/components/select/src/use-select.ts

@@ -166,6 +166,11 @@ export type UseSelectProps<T> = Omit<
      * @default undefined
      */
     isVirtualized?: boolean;
+    /**
+     * Whether the listbox will be prevented from opening when there are no items.
+     * @default false
+     */
+    hideEmptyContent?: boolean;
   };
 
 export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
@@ -209,6 +214,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     onClose,
     className,
     classNames,
+    hideEmptyContent = false,
     ...otherProps
   } = props;
 
@@ -263,6 +269,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     isDisabled: originalProps.isDisabled,
     isInvalid: originalProps.isInvalid,
     defaultOpen,
+    hideEmptyContent,
     onOpenChange: (open) => {
       onOpenChange?.(open);
       if (!open) {

packages/components/select/stories/select.stories.tsx

@@ -411,6 +411,31 @@ const StartContentTemplate = ({color, variant, ...args}: SelectProps) => (
   </Select>
 );
 
+const EmptyTemplate = ({color, variant, ...args}: SelectProps) => (
+  <div className="w-full justify-center flex gap-2">
+    <Select
+      hideEmptyContent
+      className="max-w-xs"
+      color={color}
+      label="Hide empty content"
+      variant={variant}
+      {...args}
+    >
+      {[]}
+    </Select>
+    <Select
+      className="max-w-xs"
+      color={color}
+      hideEmptyContent={false}
+      label="Show empty content"
+      variant={variant}
+      {...args}
+    >
+      {[]}
+    </Select>
+  </div>
+);
+
 const CustomItemsTemplate = ({color, variant, ...args}: SelectProps<User>) => (
   <div className="w-full justify-center flex gap-2">
     <Select
@@ -864,6 +889,14 @@ export const StartContent = {
   },
 };
 
+export const EmptyContent = {
+  render: EmptyTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithDescription = {
   render: MirrorTemplate,
 

packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts

@@ -36,6 +36,10 @@ export interface MultiSelectProps<T>
    * @default true
    */
   shouldFlip?: boolean;
+  /**
+   * Whether the menu should be hidden when there are no items.
+   */
+  hideEmptyContent?: boolean;
 }
 
 export interface MultiSelectState<T>
@@ -82,6 +86,8 @@ export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): M
     value: listState.selectedKeys,
   });
 
+  const shouldHideContent = listState.collection.size === 0 && props.hideEmptyContent;
+
   return {
     ...validationState,
     ...listState,
@@ -91,18 +97,17 @@ export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): M
       triggerState.close();
     },
     open(focusStrategy: FocusStrategy | null = null) {
-      // Don't open if the collection is empty.
-      if (listState.collection.size !== 0) {
-        setFocusStrategy(focusStrategy);
-        triggerState.open();
-      }
+      if (shouldHideContent) return;
+
+      setFocusStrategy(focusStrategy);
+      triggerState.open();
     },
     toggle(focusStrategy: FocusStrategy | null = null) {
-      if (listState.collection.size !== 0) {
-        setFocusStrategy(focusStrategy);
-        triggerState.toggle();
-        validationState.commitValidation();
-      }
+      if (shouldHideContent) return;
+
+      setFocusStrategy(focusStrategy);
+      triggerState.toggle();
+      validationState.commitValidation();
     },
     isFocused,
     setFocused,