[BUG] - Focus remain outside Popover component

[xylish7]

NextUI Version

2.3.6

Describe the bug

When the popover is opened via mouse click or keyboard, the focus remains outside of the popover, instead of moving inside the Popover, as mentioned in the docs.

Your Example Website or App

https://nextui.org/docs/components/popover#with-form

Steps to Reproduce the Bug or Issue

To reproduce the issue check Popover with form example from official docs by:

1. Click on the Cusomize button.
2. The popover opens, but if Tab key is pressed, the focus is outside the popover and other elements are being focused.

Expected behavior

The focus should be move inside the Popover. When Tab is pressed, Width input should get focused.

Screenshots or Videos

Operating System Version

Windows

Browser

Firefox

[linear]

ENG-830 [BUG] - Focus remain outside Popover component

[ShrinidhiUpadhyaya]

You could make use of autoFocus prop. Just add it to the first element inside PopoverContent which is the Input with label width.

<Popover showArrow offset={10} placement="bottom">
   <PopoverTrigger>
     <Button color="primary">Customize</Button>
   </PopoverTrigger>
   <PopoverContent className="w-[240px]">
     {(titleProps) => (
       <div className="px-1 py-2 w-full">
         <p className="text-small font-bold text-foreground" {...titleProps}>
           Dimensions
         </p>
         <div className="mt-2 flex flex-col gap-2 w-full">
           <Input autoFocus defaultValue="100%" label="Width" size="sm" variant="bordered" />
           <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
           <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
           <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
         </div>
       </div>
     )}
   </PopoverContent>
 </Popover>

[xylish7]

This may be a workaround, but I think this is still a bug. The focus should move by default into the popover as mentioned in the docs, in the Accessibility section.

Also, this is a specific case, where we have an Input and we can use autoFocus. There may be other elements which do no have the autoFocus prop and focus should be inside the Popover, not on a specific element inside of it. Save issue with Dropdown component.

Both Dropdown and Popover should behave like in the example for the landing page of nextui.org, where the focus work as it should.

[wingkwong]

I second that. Without explicitly setting autofocus, focus should be moved into the popover on mount and restored to the trigger element on unmount.