[BUG] - Autocomplete's keyboard shortcuts behave weirdly

[takuyahara]

NextUI Version

0.0.0-canary-20240607005641

Describe the bug

Autocomplete's keyboard shortcuts behave weirdly as follows. They don't happen in examples on document.

1. When hitting tab key next autocomplete's textbox is not focused and popover opens but none of keyboard shortcut (ex. arrow up/down, enter, esc, etc...) works.
2. When autocomplete is the last focusable component, hitting tab key results popover keeps opened.

But when textbox is clicked, hitting tab key focuses to next autocomplete's textbox. This is an expected behavior.

Your Example Website or App

https://stackblitz.com/~/github.com/takuyahara/nextui-autocomplete-issue

Steps to Reproduce the Bug or Issue

1. Go to the above-mentioned stackblitz page.
2. Open page in new tab to see an isolated version.
3. Hit tab key and arrow up/down keys.

Expected behavior

1. Hitting tab key focuses to next autocomplete's textbox with popover automatically opened and keyboard shortcut (ex. arrow up/down, enter, esc, etc...) works.
2. When autocomplete is the last focusable component, hitting tab key closes popover.

Screenshots or Videos

Screen.Recording.2024-06-10.at.0.03.49.mp4

Operating System Version

macOS

Browser

Brave v1.66.118 (Chromium v125.0.6422.147)

[linear]

ENG-992 [BUG] - Autocomplete's keyboard behaves weirdly

[takuyahara]

Another issues found.

Describe the bug

1. Clicking autocomplete doesn't focus on textbox on first click so input is not accepted. It has to be clicked twice.
2. When typing in textbox and delete key is hit, focus is automatically blurred.
3. When popover is opened and outside of the browser is clicked, popover closes. And when inside of the page is clicked popover reopens without keyboard support.

Expected behavior

1. Clicking autocomplete focuses on textbox on first click.
2. Hitting delete key in textbox doesn't blur.
3. When inside of the page is clicked again, textbox is focused and popover reopens without keyboard support.

Screenshots or Videos

Screen.Recording.2024-06-10.at.0.54.22.mp4

[wingkwong]

This is what I see. Just use tab and arrow down key.

issue3225.webm

[takuyahara]

It's weird, I see the issue on both Windows and macOS with Chrome, Brave and Safari. I wonder if you are looking the stackblitz link because in your video I see some padding on top of the page but it doesn't exist actually.

[wingkwong]

@takuyahara i was testing on my local tho.

[takuyahara]

@wingkwong Could you please check on stackblitz? This is where I see the issue (and on my local as well of course).

https://stackblitz.com/~/github.com/takuyahara/nextui-autocomplete-issue

[takuyahara]

@wingkwong I hope you have time to see. Let me know if something is lacking.

[wingkwong]

@takuyahara I could see the error on my next app also but not in storybook n doc. Need to dig a bit.

[takuyahara]

@wingkwong Just a quick note: downgrading @nextui-org/react to 2.2.10 fixed the issue. Still not sure why it doesn't reproduce in storybook but I see this part causes a problem. If you comment L112 out it solves issue.

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

Lines 109 to 114 in 47c2472

	const dialogRef = React.useRef(null);
	const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
	const dialogProps = getDialogProps({
	ref: dialogRef,
	...ariaDialogProps,
	});

[takuyahara]

Maybe the difference that the issue happens in app but doesn't in storybook is by a difference of bundler. NextUI components are bundled by tsup but storybook bundles with Vite if I understand properly.

It's by React strict mode. See #3225 (comment)

[wingkwong]

There's lots of diff between 2.2.10 and 2.4.2. We had some major dependencies upgrades in-between. To share more context here, in dialog's focus management, focus is moved into the dialog on mount and restored to the trigger on unmount. In autocomplete, the focus behaviour is a little bit different. We set the focus whenever the popover is open in use-autocomplete.ts.

[takuyahara]

Quick note: I found the issue is caused by React's strict mode. Removing <React.StrictMode> from root component fixes the issue and this is why it doesn't reproduce in Storybook because strict mode is disabled. When enabled the issue reproduces in Storybook as well.

nextui/packages/storybook/.storybook/main.js

Lines 16 to 19 in 6951b1f

	framework: {
	name: getAbsolutePath("@storybook/react-vite"),
	options: {}
	},

-   options: {}
+   options: {
+     strictMode: true,
+   }

But since, as far as I know, the use of strict mode is not restricted in NextUI every component should work on both strict and non-strict mode. It seems like there's something to be destructed on unmount and digging into use-autocomplete.ts (thank you for your suggestion @wingkwong).