[BUG] - Unexpected behaviour on autocompleteItem select

[Mike3386]

NextUI Version

2.4.2

Describe the bug

On mobile, when you tap on AutocompleteItem and there is other autocomplete under it, it makes element under focused.

Your Example Website or App

CodeSandbox

Steps to Reproduce the Bug or Issue

1. Open codesandbox
2. Open preview in new tab
3. Open devTools
4. Toggle device toolbar
5. Open first autocomplete
6. Tap on autoCompleteItem that has autocomplete under it
7. See bug

Expected behavior

As a user, i expected to close list of autoCompleteItems and element under might be not focused

Screenshots or Videos

Display how it looks

Vite.App.-.Google.Chrome.-.11.July.2024.mp4

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-1128 [BUG] - Unexpected behaviour on autocompleteItem select

[navneetthakor]

Hello @wingkwong can you please assing this issue to me

[navneetthakor]

@wingkwong I have tried to discover issue well but nothing is happening as you mentioned here.

Uploading Untitled video - Made with Clipchamp.mp4…

[wingkwong]

@navneetthakor I just tested on the given sandbox again and i can reproduce the issue. you need to do it in mobile viewport. Also the video you provided is now shown. please double check.

[jhargett]

I am also experiencing this issue but only on mobile viewport

[mkrystkowicz]

Happens on modal as well, for example when you click on close button or outside modal

[jedi04]

I am also facing this issue. Any fix for this?

[wingkwong]

@navneetthakor any update?

[mkrystkowicz]

I have switched to react-select package not to confuse mobile users (recommend this approach, less effort than trying to fix that), tried preventing mouse touch but the bug was still there.

[slimshreydy]

Running into a similar issue. If I have multiple Autocompletes, the first one works as expected but then with the second one, the search value (the value of the input in the autocomplete) gets reset automatically after 2 characters are typed. I only see this issue on Chrome iOS.

[macci001]

Seems like this issue occurs due to the chromium bug. Due to this, the problem got propagated to react-aria's usePress and NextUI library.

Issue Summary:

• When there is a touchStart event triggered on element and that element moves out of the DOM immediately, the element beneath will get the click event triggered.
• Due to the this, it will feel like the element beneath the overlay is getting clicked, when overlay is clicked. (This happens only during touch.)

The ReactSpectrum team has already put up the fix for this in usePress: Fix for onClick triggered on wrong target.
This fix is already included in v2.22.3 of RA interactions
We are currently using the the v2.21.3 of RA interactions and using the latest version of the dependency should solve the problem.

Note:

• Since the issue occurs when the element moves out of the DOM immediately, if there is some delay in its exit, we would not see this issue.
• An example of above can be seen after 3845 pr was added to the canary. This PR added fixed the exit animation of the pop-over in the autocomplete. Since this avoids the immediate exit of the target, after this PR the issue seems only to persist in case of disabled-animation.

Some of the references:

• Chromium Bug
• FireFox Bug
• ReactAria's issue for this bug patch: 1513
• ReactSpectrum's patch pr: 7026