nextui icon indicating copy to clipboard operation
nextui copied to clipboard
verified publisher icon nextui-org

[BUG] - Unexpected behaviour on autocompleteItem select

Open Mike3386 opened this issue 1 year ago • 11 comments

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

https://github.com/nextui-org/nextui/assets/14157926/223e1323-3bbe-4bbf-ad2a-ba2d5f4e71f3

Operating System Version

Windows

Browser

Chrome

Mike3386 avatar Jul 11 '24 16:07 Mike3386

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

linear[bot] avatar Jul 11 '24 16:07 linear[bot]

Hello @wingkwong can you please assing this issue to me

navneetthakor avatar Jul 20 '24 05:07 navneetthakor

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

Uploading Untitled video - Made with Clipchamp.mp4…

navneetthakor avatar Jul 21 '24 16:07 navneetthakor

@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.

wingkwong avatar Jul 22 '24 02:07 wingkwong

I am also experiencing this issue but only on mobile viewport

jhargett avatar Aug 19 '24 20:08 jhargett

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

mkrystkowicz avatar Aug 21 '24 08:08 mkrystkowicz

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

jedi04 avatar Sep 06 '24 17:09 jedi04

@navneetthakor any update?

wingkwong avatar Sep 07 '24 10:09 wingkwong

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.

mkrystkowicz avatar Sep 08 '24 10:09 mkrystkowicz

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.

slimshreydy avatar Oct 12 '24 06:10 slimshreydy

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:

macci001 avatar Oct 13 '24 04:10 macci001