archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
աӄա 2024-07-06 15:44:44 +08:00 committed by GitHub
parent f5d94f96e4
commit 0462dde0a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/plenty-suns-juggle.md Normal file
View File

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

3
packages/components/autocomplete/src/use-autocomplete.ts
View File

@ -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;
};

8
packages/components/popover/src/free-solo-popover.tsx
View File

@ -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,
});