fix(popover): voiceover closes when focusing an item fixed

packages/components/popover/__tests__/popover.test.tsx

@@ -76,11 +76,15 @@ describe("Popover", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it("should hide the popover on blur ", () => {
+  it("should hide the popover on blur (shouldCloseOnBlur=true)", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
-      <Popover isOpen onOpenChange={(isOpen) => (!isOpen ? onClose() : undefined)}>
+      <Popover
+        isOpen
+        shouldCloseOnBlur
+        onOpenChange={(isOpen) => (!isOpen ? onClose() : undefined)}
+      >
         <PopoverTrigger>
           <button>Open popover</button>
         </PopoverTrigger>

packages/components/popover/src/popover-content.tsx

@@ -36,6 +36,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     getArrowProps,
     getDialogProps,
     getBackdropProps,
+    isNonModal,
     onClose,
   } = usePopoverContext();
 
@@ -55,7 +56,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
 
   const content = (
     <>
-      <DismissButton onDismiss={onClose} />
+      {!isNonModal && <DismissButton onDismiss={onClose} />}
       <Component {...getDialogProps(mergeProps(dialogProps, otherProps))} ref={dialogRef}>
         {typeof children === "function" ? children(titleProps) : children}
         {arrowContent}

packages/components/popover/src/use-aria-popover.ts

@@ -1,5 +1,11 @@
 import {RefObject, useEffect} from "react";
-import {AriaPopoverProps, useOverlay, PopoverAria, useOverlayPosition} from "@react-aria/overlays";
+import {
+  AriaPopoverProps,
+  useOverlay,
+  PopoverAria,
+  useOverlayPosition,
+  AriaOverlayProps,
+} from "@react-aria/overlays";
 import {OverlayPlacement, toReactAriaPlacement, ariaHideOutside} from "@nextui-org/aria-utils";
 import {OverlayTriggerState} from "@react-stately/overlays";
 import {mergeProps} from "@react-aria/utils";
@@ -22,7 +28,7 @@ export interface Props {
   scrollRef?: RefObject<HTMLElement>;
 }
 
-export type ReactAriaPopoverProps = Props & Omit<AriaPopoverProps, "placement">;
+export type ReactAriaPopoverProps = Props & Omit<AriaPopoverProps, "placement"> & AriaOverlayProps;
 
 /**
  * Provides the behavior and accessibility implementation for a popover component.
@@ -41,6 +47,7 @@ export function useReactAriaPopover(
     scrollRef,
     shouldFlip,
     boundaryElement,
+    shouldCloseOnBlur = false,
     placement: placementProp = "top",
     containerPadding,
     isNonModal: isNonModalProp,
@@ -54,15 +61,9 @@ export function useReactAriaPopover(
     {
       isOpen: state.isOpen,
       onClose: state.close,
-      shouldCloseOnBlur: true,
-      isDismissable: !isNonModal,
+      shouldCloseOnBlur,
+      isDismissable: isNonModal,
       isKeyboardDismissDisabled,
-      shouldCloseOnInteractOutside(element) {
-        // Don't close if the click is within the trigger or the popover itself
-        let trigger = triggerRef?.current;
-
-        return !trigger || !trigger.contains(element);
-      },
     },
     popoverRef,
   );

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

@@ -12,7 +12,7 @@ import {getArrowPlacement, getShouldUseAxisPlacement} from "@nextui-org/aria-uti
 import {popover} from "@nextui-org/theme";
 import {mergeProps, mergeRefs} from "@react-aria/utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {useId, useMemo, useCallback, useRef} from "react";
+import {useMemo, useCallback, useRef} from "react";
 
 import {useReactAriaPopover, ReactAriaPopoverProps} from "./use-aria-popover";
 
@@ -86,9 +86,11 @@ export function usePopover(originalProps: UsePopoverProps) {
     isOpen,
     defaultOpen,
     onOpenChange,
+    isNonModal = true,
     shouldFlip = true,
     containerPadding = 12,
     shouldBlockScroll = false,
+    shouldCloseOnBlur,
     portalContainer,
     placement: placementProp = "top",
     triggerType = "dialog",
@@ -105,7 +107,6 @@ export function usePopover(originalProps: UsePopoverProps) {
   } = props;
 
   const Component = as || "div";
-  const popoverId = useId();
 
   const domRef = useDOMRef(ref);
 
@@ -136,10 +137,12 @@ export function usePopover(originalProps: UsePopoverProps) {
   } = useReactAriaPopover(
     {
       triggerRef,
+      isNonModal,
       popoverRef: domRef,
       placement: placementProp,
       offset: offset,
       scrollRef,
+      shouldCloseOnBlur,
       boundaryElement,
       crossOffset,
       shouldFlip,
@@ -167,7 +170,6 @@ export function usePopover(originalProps: UsePopoverProps) {
     ref: domRef,
     ...mergeProps(popoverProps, otherProps, props),
     style: mergeProps(popoverProps.style, otherProps.style, props.style),
-    id: popoverId,
   });
 
   const getDialogProps: PropGetter = (props = {}) => ({
@@ -191,14 +193,13 @@ export function usePopover(originalProps: UsePopoverProps) {
   const getTriggerProps = useCallback<PropGetter>(
     (props = {}, _ref: Ref<any> | null | undefined = null) => {
       return {
-        "aria-controls": popoverId,
         "aria-haspopup": "dialog",
         ...mergeProps(triggerProps, props),
         className: slots.trigger({class: clsx(classNames?.trigger, props.className)}),
         ref: mergeRefs(_ref, triggerRef),
       };
     },
-    [isOpen, popoverId, state, triggerProps, triggerRef],
+    [isOpen, state, triggerProps, triggerRef],
   );
 
   const getBackdropProps = useCallback<PropGetter>(
@@ -233,6 +234,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     showArrow,
     triggerRef,
     placement,
+    isNonModal,
     portalContainer,
     isOpen: state.isOpen,
     onClose: state.close,

packages/components/select/src/select.tsx

@@ -1,10 +1,10 @@
 import {Listbox} from "@nextui-org/listbox";
 import {Popover, PopoverContent, PopoverTrigger} from "@nextui-org/popover";
-import {ScrollShadow} from "@nextui-org/scroll-shadow";
 import {ChevronDownIcon} from "@nextui-org/shared-icons";
 import {Spinner} from "@nextui-org/spinner";
 import {forwardRef} from "@nextui-org/system";
-import {FocusScope} from "@react-aria/focus";
+// import {FocusScope} from "@react-aria/focus";
+import {ScrollShadow} from "@nextui-org/scroll-shadow";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {cloneElement, ForwardedRef, ReactElement, Ref, useMemo} from "react";
 
@@ -109,19 +109,19 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
               {startContent}
               <span {...getValueProps()}>
                 {renderSelectedItem}
-                <VisuallyHidden>,</VisuallyHidden>
+                {state.selectedItems && <VisuallyHidden>,</VisuallyHidden>}
               </span>
               {endContent}
             </div>
             {renderIndicator}
           </Component>
         </PopoverTrigger>
         <PopoverContent>
-          <FocusScope contain restoreFocus>
-            <ScrollShadow {...getListboxWrapperProps()}>
-              <Listbox {...getListboxProps()} />
-            </ScrollShadow>
-          </FocusScope>
+          {/* <FocusScope contain restoreFocus> */}
+          <ScrollShadow {...getListboxWrapperProps()}>
+            <Listbox {...getListboxProps()} />
+          </ScrollShadow>
+          {/* </FocusScope> */}
         </PopoverContent>
       </Popover>
       {helperWrapper}

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

@@ -150,6 +150,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     renderValue,
     onSelectionChange,
     placeholder,
+    disallowEmptySelection = true,
     selectionMode = "single",
     spinnerRef,
     scrollRef: scrollRefProp,
@@ -207,6 +208,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     ...props,
     isOpen,
     selectionMode,
+    disallowEmptySelection,
     children: children as CollectionChildren<T>,
     isRequired: originalProps?.isRequired,
     isDisabled: originalProps?.isDisabled,
@@ -231,7 +233,11 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   });
 
   const {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps} =
-    useMultiSelect({...props, isDisabled: originalProps?.isDisabled}, state, triggerRef);
+    useMultiSelect(
+      {...props, disallowEmptySelection, isDisabled: originalProps?.isDisabled},
+      state,
+      triggerRef,
+    );
 
   const {isPressed, buttonProps} = useAriaButton(triggerProps, triggerRef);
 
@@ -416,7 +422,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       className: slots.listbox({
         class: clsx(classNames?.listbox, props?.className),
       }),
-      ...mergeProps(menuProps, userListboxProps, props),
+      ...mergeProps(userListboxProps, props, menuProps),
     } as ListboxProps;
   };
 
@@ -427,7 +433,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
         triggerRef,
         ref: popoverRef,
         scrollRef: listboxRef,
-
+        triggerType: "listbox",
         className: slots.popover({
           class: clsx(classNames?.popover, props.className),
         }),

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

@@ -91,7 +91,7 @@ export function useMultiSelect<T>(
     }
   };
 
-  // Typeahead functionality - imitating default `<select>` behaviour.
+  // Typeahead functionality - imitating default `<select>` behavior.
   const {typeSelectProps} = useTypeSelect({
     keyboardDelegate: delegate,
     selectionManager: state.selectionManager,