fix: popover-based focus behaviour

.changeset/good-crabs-clap.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/autocomplete": patch
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+"@nextui-org/select": patch
+---
+
+Revise focus behaviours (#2849, #2834, #2779, #2962)

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -137,7 +137,136 @@ describe("Autocomplete", () => {
  expect(() => wrapper.unmount()).not.toThrow();
  });
 
- it("should close dropdown when clicking outside autocomplete", async () => {
+ it("should focus when clicking autocomplete", async () => {
+ const wrapper = render(
+ <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+ <AutocompleteItem key="penguin" value="penguin">
+ Penguin
+ </AutocompleteItem>
+ <AutocompleteItem key="zebra" value="zebra">
+ Zebra
+ </AutocompleteItem>
+ <AutocompleteItem key="shark" value="shark">
+ Shark
+ </AutocompleteItem>
+ </Autocomplete>,
+ );
+
+ const autocomplete = wrapper.getByTestId("autocomplete");
+
+ // open the select listbox
+ await act(async () => {
+ await userEvent.click(autocomplete);
+ });
+
+ // assert that the autocomplete listbox is open
+ expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+ // assert that input is focused
+ expect(autocomplete).toHaveFocus();
+ });
+
+ it("should clear value after clicking clear button", async () => {
+ const wrapper = render(
+ <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+ <AutocompleteItem key="penguin" value="penguin">
+ Penguin
+ </AutocompleteItem>
+ <AutocompleteItem key="zebra" value="zebra">
+ Zebra
+ </AutocompleteItem>
+ <AutocompleteItem key="shark" value="shark">
+ Shark
+ </AutocompleteItem>
+ </Autocomplete>,
+ );
+
+ const autocomplete = wrapper.getByTestId("autocomplete");
+
+ // open the select listbox
+ await act(async () => {
+ await userEvent.click(autocomplete);
+ });
+
+ // assert that the autocomplete listbox is open
+ expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+ let options = wrapper.getAllByRole("option");
+
+ // select the target item
+ await act(async () => {
+ await userEvent.click(options[0]);
+ });
+
+ const {container} = wrapper;
+
+ const clearButton = container.querySelector(
+ "[data-slot='inner-wrapper'] button:nth-of-type(1)",
+ )!;
+
+ expect(clearButton).not.toBeNull();
+
+ // select the target item
+ await act(async () => {
+ await userEvent.click(clearButton);
+ });
+
+ // assert that the input has empty value
+ expect(autocomplete).toHaveValue("");
+
+ // assert that input is focused
+ expect(autocomplete).toHaveFocus();
+ });
+
+ it("should open and close listbox by clicking selector button", async () => {
+ const wrapper = render(
+ <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+ <AutocompleteItem key="penguin" value="penguin">
+ Penguin
+ </AutocompleteItem>
+ <AutocompleteItem key="zebra" value="zebra">
+ Zebra
+ </AutocompleteItem>
+ <AutocompleteItem key="shark" value="shark">
+ Shark
+ </AutocompleteItem>
+ </Autocomplete>,
+ );
+
+ const {container} = wrapper;
+
+ const selectorButton = container.querySelector(
+ "[data-slot='inner-wrapper'] button:nth-of-type(2)",
+ )!;
+
+ expect(selectorButton).not.toBeNull();
+
+ const autocomplete = wrapper.getByTestId("autocomplete");
+
+ // open the select listbox by clicking selector button
+ await act(async () => {
+ await userEvent.click(selectorButton);
+ });
+
+ // assert that the autocomplete listbox is open
+ expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+ // assert that input is focused
+ expect(autocomplete).toHaveFocus();
+
+ // close the select listbox by clicking selector button again
+ await act(async () => {
+ await userEvent.click(selectorButton);
+ });
+
+ // assert that the autocomplete listbox is closed
+ expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+
+ // assert that input is still focused
+ expect(autocomplete).toHaveFocus();
+ });
+
+ it("should close listbox when clicking outside autocomplete", async () => {
  const wrapper = render(
  <Autocomplete
  aria-label="Favorite Animal"
@@ -158,12 +287,12 @@ describe("Autocomplete", () => {
 
  const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
 
- // open the select dropdown
+ // open the select listbox
  await act(async () => {
  await userEvent.click(autocomplete);
  });
 
- // assert that the autocomplete dropdown is open
+ // assert that the autocomplete listbox is open
  expect(autocomplete).toHaveAttribute("aria-expanded", "true");
 
  // click outside the autocomplete component
@@ -173,9 +302,12 @@ describe("Autocomplete", () => {
 
  // assert that the autocomplete is closed
  expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+
+ // assert that input is not focused
+ expect(autocomplete).not.toHaveFocus();
  });
 
- it("should close dropdown when clicking outside autocomplete with modal open", async () => {
+ it("should close listbox when clicking outside autocomplete with modal open", async () => {
  const wrapper = render(
  <Modal isOpen>
  <ModalContent>
@@ -204,21 +336,65 @@ describe("Autocomplete", () => {
 
  const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
 
- // open the autocomplete dropdown
+ // open the autocomplete listbox
  await act(async () => {
  await userEvent.click(autocomplete);
  });
 
- // assert that the autocomplete dropdown is open
+ // assert that the autocomplete listbox is open
  expect(autocomplete).toHaveAttribute("aria-expanded", "true");
 
  // click outside the autocomplete component
  await act(async () => {
  await userEvent.click(document.body);
  });
 
- // assert that the autocomplete dropdown is closed
+ // assert that the autocomplete listbox is closed
  expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+
+ // assert that input is not focused
+ expect(autocomplete).not.toHaveFocus();
+ });
+
+ it("should set the input after selection", async () => {
+ const wrapper = render(
+ <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+ <AutocompleteItem key="penguin" value="penguin">
+ Penguin
+ </AutocompleteItem>
+ <AutocompleteItem key="zebra" value="zebra">
+ Zebra
+ </AutocompleteItem>
+ <AutocompleteItem key="shark" value="shark">
+ Shark
+ </AutocompleteItem>
+ </Autocomplete>,
+ );
+
+ const autocomplete = wrapper.getByTestId("autocomplete");
+
+ // open the listbox
+ await act(async () => {
+ await userEvent.click(autocomplete);
+ });
+
+ // assert that the autocomplete listbox is open
+ expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+ // assert that input is focused
+ expect(autocomplete).toHaveFocus();
+
+ let options = wrapper.getAllByRole("option");
+
+ expect(options.length).toBe(3);
+
+ // select the target item
+ await act(async () => {
+ await userEvent.click(options[0]);
+ });
+
+ // assert that the input has target selection
+ expect(autocomplete).toHaveValue("Penguin");
  });
 });
 

packages/components/autocomplete/src/autocomplete.tsx

@@ -15,7 +15,6 @@ interface Props<T> extends UseAutocompleteProps<T> {}
 function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLInputElement>) {
  const {
  Component,
- state,
  isOpen,
  disableAnimation,
  selectorIcon = <ChevronDownIcon />,
@@ -33,7 +32,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
  } = useAutocomplete<T>({...props, ref});
 
  const popoverContent = isOpen ? (
- <FreeSoloPopover {...getPopoverProps()} state={state}>
+ <FreeSoloPopover {...getPopoverProps()}>
  <ScrollShadow {...getListBoxWrapperProps()}>
  <Listbox {...getListBoxProps()} />
  </ScrollShadow>

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

@@ -6,7 +6,7 @@ import {autocomplete} from "@nextui-org/theme";
 import {useFilter} from "@react-aria/i18n";
 import {FilterFn, useComboBoxState} from "@react-stately/combobox";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
-import {ReactNode, useCallback, useEffect, useMemo, useRef} from "react";
+import {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {ComboBoxProps} from "@react-types/combobox";
 import {PopoverProps} from "@nextui-org/popover";
 import {ListboxProps} from "@nextui-org/listbox";
@@ -199,6 +199,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  const inputRef = useDOMRef<HTMLInputElement>(ref);
  const scrollShadowRef = useDOMRef<HTMLElement>(scrollRefProp);
 
+ const [shouldFocus, setShouldFocus] = useState(false);
+
  const {
  buttonProps,
  inputProps,
@@ -278,6 +280,13 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  color: isInvalid ? "danger" : originalProps?.color,
  isIconOnly: true,
  disableAnimation,
+ onClick: () => {
+ // if the listbox is open, clicking selector button should
+ // close the listbox and focus on the input
+ if (state.isOpen) {
+ setShouldFocus(true);
+ }
+ },
  },
  selectorButtonProps,
  ),
@@ -325,12 +334,17 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  }
  }, [isOpen]);
 
- // unfocus the input when the popover closes & there's no selected item & no allows custom value
+ // react aria has different focus strategies internally
+ // hence, handle focus behaviours on our side for better flexibilty
+
  useEffect(() => {
- if (!isOpen && !state.selectedItem && inputRef.current && !allowsCustomValue) {
- inputRef.current.blur();
+ if (shouldFocus || isOpen) {
+ inputRef?.current?.focus();
+ } else {
+ inputRef?.current?.blur();
+ if (shouldFocus) setShouldFocus(false);
  }
- }, [isOpen, allowsCustomValue]);
+ }, [shouldFocus, isOpen]);
 
  // to prevent the error message:
  // stopPropagation is now the default behavior for events in React Spectrum.
@@ -363,6 +377,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  const onClear = useCallback(() => {
  state.setInputValue("");
  state.setSelectedKey(null);
+ state.close();
  }, [state]);
 
  const onFocus = useCallback(
@@ -392,17 +407,20 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  const getClearButtonProps = () =>
  ({
  ...mergeProps(buttonProps, slotsProps.clearButtonProps),
+ // disable original focus and state toggle from react aria
+ onPressStart: () => {},
  onPress: (e: PressEvent) => {
  slotsProps.clearButtonProps?.onPress?.(e);
 
  if (state.selectedItem) {
  onClear();
  } else {
- const inputFocused = inputRef.current === document.activeElement;
-
- allowsCustomValue && state.setInputValue("");
- !inputFocused && onFocus(true);
+ if (allowsCustomValue) {
+ state.setInputValue("");
+   state.close();
+ }
  }
+ inputRef?.current?.focus();
  },
  "data-visible": !!state.selectedItem || state.inputValue?.length > 0,
  className: slots.clearButton({
@@ -429,7 +447,6 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  ref: listBoxRef,
  ...mergeProps(slotsProps.listboxProps, listBoxProps, {
  shouldHighlightOnFocus: true,
- shouldUseVirtualFocus: false,
  }),
  } as ListboxProps);
 
@@ -450,6 +467,24 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
  ),
  }),
  },
+ shouldCloseOnInteractOutside: (element: any) => {
+ let trigger = inputWrapperRef?.current;
+
+ if (!trigger || !trigger.contains(element)) {
+ // adding blur logic in shouldCloseOnInteractOutside
+ // to cater the case like autocomplete inside modal
+ if (shouldFocus) {
+ setShouldFocus(false);
+ }
+ } else {
+ // keep it focus
+ if (!shouldFocus) {
+ setShouldFocus(true);
+ }
+ }
+
+ return !trigger || !trigger.contains(element);
+ },
  } as unknown as PopoverProps;
  };
 

packages/components/modal/src/modal.tsx

@@ -17,7 +17,11 @@ const Modal = forwardRef<"div", ModalProps>((props, ref) => {
  const {children, ...otherProps} = props;
  const context = useModal({...otherProps, ref});
 
- const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;
+ const overlay = (
+ <Overlay disableFocusManagement portalContainer={context.portalContainer}>
+ {children}
+ </Overlay>
+ );
 
  return (
  <ModalProvider value={context}>