fix(popover): dialog focus behaviour (#3311)

* fix(autocomplete): set skipDialogFocus to true

* feat(popover): add skipDialogFocus to free solo popover

* refactor(popover): rename variable and add comment

* refactor(autocomplete): rename variable and add comment

* feat(changeset): add changeset

.changeset/plenty-suns-juggle.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/autocomplete": patch
+"@nextui-org/popover": patch
+---
+
+add `disableDialogFocus` to free-solo-popover (#3225, #3124, #3203)

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

@@ -460,6 +460,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
         ? popoverProps.shouldCloseOnInteractOutside
         : (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
+      // when the popover is open, the focus should be on input instead of dialog
+      // therefore, we skip dialog focus here
+      disableDialogFocus: true,
     } as unknown as PopoverProps;
   };
 

packages/components/popover/src/free-solo-popover.tsx

@@ -24,6 +24,7 @@ export interface FreeSoloPopoverProps extends Omit<UsePopoverProps, "children">
     originX?: number;
     originY?: number;
   };
+  disableDialogFocus?: boolean;
 }
 
 type FreeSoloPopoverWrapperProps = {
@@ -87,7 +88,7 @@ const FreeSoloPopoverWrapper = forwardRef<"div", FreeSoloPopoverWrapperProps>(
 FreeSoloPopoverWrapper.displayName = "NextUI.FreeSoloPopoverWrapper";
 
 const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
-  ({children, transformOrigin, ...props}, ref) => {
+  ({children, transformOrigin, disableDialogFocus = false, ...props}, ref) => {
     const {
       Component,
       state,
@@ -109,7 +110,10 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
     const dialogRef = React.useRef(null);
     const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
     const dialogProps = getDialogProps({
-      ref: dialogRef,
+      // by default, focus is moved into the dialog on mount
+      // we can use `disableDialogFocus` to disable this behaviour
+      // e.g. in autocomplete, the focus should be moved to the input (handled in autocomplete hook) instead of the dialog first
+      ...(!disableDialogFocus && {ref: dialogRef}),
       ...ariaDialogProps,
     });