[BUG] - Dropdown Item not usable on Android #1349
Comments
|
Work's on my machine. Chrome 115.0.5790.139 |
|
Hey @stgogm are you using a real device, or are you using the one provided by Chrome Dev Tools? |
|
Thanks for revising this. I tried with two real devices, and one definitively doesn't work. There are no error logs or anything: screenrecorder-2023-08-11-10-57-10-405_iyyV1RAU.mp4I've tried other libraries (MUI, Prime), and they work well, so I'm trying to figure out what's happening. Not working device:
|
|
I had issues with Dropdown button wrapped in a Tooltip. Also, Dropdown or Popover doesn't work for me in Chrome's responsive tool (but it works fine on actual devices as I checked, works fine in Safari and it's responsive design tool, works in iOS 16), Chrome is v115 latest. Example: my webpage (there are sources as well, link in footer), plan to replace with something else as it may not work in some edge cases, noticed after it was already there. |
|
Yeah, also doesn't work on my test Android 13 (Pixel 4a). Only Navbar toggle works from this kind of controls (visible only on small screens via link above). Update: there is a Dropdown on User block, and there's a Popover when you click on "Built with" in footer. Hope it helps to reproduce. |
For issues regarding Tooltip wrapping other overlays components please check this #1265 |
Thanks! Yes, I had figured out that kind of a workaround, but then decided to rework layout a bit :) |
|
Could you please go to this page on your device, tap the button, and paste the output you get? Also please include as much info as possible about your device, including hardware, Android version, Chrome version, etc. https://codepen.io/devongovett/pen/XWyLEvy |
{ Android 12 SKQ1.211006.001 |
|
@devongovett this is on the non working device: {
"isTrusted": true,
"pointerId": 7,
"width": 0,
"height": 0,
"pressure": 1,
"tiltX": 0,
"tiltY": 0,
"azimuthAngle": 0,
"altitudeAngle": 1.5707963267948966,
"tangentialPressure": 0,
"twist": 0,
"pointerType": "touch",
"isPrimary": true,
"screenX": 21.090909957885742,
"screenY": 492,
"clientX": 22.936052322387695,
"clientY": 24.672319412231445,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 1,
"pageX": 22.936052322387695,
"pageY": 24.672319412231445,
"x": 22.936052322387695,
"y": 24.672319412231445,
"offsetX": 12.96331787109375,
"offsetY": 14.6995849609375,
"movementX": 0,
"movementY": 0,
"layerX": 22,
"layerY": 24,
"detail": 0,
"which": 1,
"type": "pointerdown",
"eventPhase": 2,
"bubbles": true,
"cancelable": true,
"defaultPrevented": false,
"composed": true,
"timeStamp": 9183.899999976158,
"returnValue": true,
"cancelBubble": false,
"NONE": 0,
"CAPTURING_PHASE": 1,
"AT_TARGET": 2,
"BUBBLING_PHASE": 3
} |
|
This is from a working device, as you can see |
|
So, for now as a workaround I've noticed that drop-downs without backdrop work for me on all devices, so removed it. |
|
@emmanuelxd @stgogm thanks! could you repeat the same thing except click the button using Android's TalkBack screen reader? That's what we're trying to detect here. See here for how to turn TalkBack on and off (usually you press and hold both volume buttons). Once it is on, move the virtual cursor to the button and double tap to click. |
|
@devongovett sure! Results with TalkBack On {
"isTrusted": true,
"pointerId": 1,
"width": 1,
"height": 1,
"pressure": 0,
"tiltX": 0,
"tiltY": 0,
"azimuthAngle": 0,
"altitudeAngle": 1.5707963267948966,
"tangentialPressure": 0,
"twist": 0,
"pointerType": "mouse",
"isPrimary": true,
"screenX": 15,
"screenY": 148,
"clientX": 41,
"clientY": 18,
"ctrlKey": false,
"shiftKey": false,
"altKey": false,
"metaKey": false,
"button": 0,
"buttons": 1,
"pageX": 41,
"pageY": 18,
"x": 41,
"y": 18,
"offsetX": 0,
"offsetY": 0,
"movementX": 0,
"movementY": 0,
"layerX": 41,
"layerY": 18,
"detail": 0,
"which": 1,
"type": "pointerdown",
"eventPhase": 2,
"bubbles": true,
"cancelable": true,
"defaultPrevented": false,
"composed": true,
"timeStamp": 11230,
"returnValue": true,
"cancelBubble": false,
"NONE": 0,
"CAPTURING_PHASE": 1,
"AT_TARGET": 2,
"BUBBLING_PHASE": 3
} |
|
Great thanks. We will make some updates on the React Aria side and post a link here for you to test once we have a potential fix. And sorry again, these device specific bugs are hard! 😄 |
|
Hey everyone! We have a potential fix on the React Aria side so if you were having issues previously, could you please go to this page on the docs, scroll to the button that says "Press me!", and report what it says? Also please include as much info as possible about your device, including hardware, Android version, Chrome version, etc. Unfortunately, our team doesn't have the devices which are causing this issue so your help would be much appreciated! |
|
Just wanted to chime in with the following bug filed against Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1271444. The check we use in React Aria relies on several attributes of the click event, but is still quite brittle especially since Talkback sometimes issues events with |
|
@yihuiliao this is what i get: Thanks! |
|
Is there anyway to fix this issue temporarily? A lot of our users are mobile based and hence a lot of them are getting this issue. |
|
|
Is there anyway to fix this issue temporarily? A lot of users are having this issue. |
|
Has anyone tried to see if the changes that are not yet released but are in main in react-aria fix all of this? |
|
I don't understand, what do you mean? Do I install the react-aria package on the main branch? |
|
You could try using the {
"overrides": {
"@react-aria/interactions": "nightly"
}
} |
|
|
Yes but can you verify what was actually installed in your node_modules in case the override didn't work for some reason? |
|
installed version 3.16, I'll add it to the main dependencies, and see if it resolves and forces the version |
|
didn't solve the problem, any other alternative? |
|
what does |
|
|
Can you try pulling and running this locally: https://github.com/LFDanLu/android-test? It has the here is a codesandbox link for the above repo: https://codesandbox.io/p/sandbox/github/LFDanLu/android-test/tree/main |
|
It worked! I'll check package by package to see what the problem might be. |
|
It worked for me too, thanks |
|
When I tried to fork it, and download it to run locally. It's not working anymore, what version of node are you using? Can you tell me the problem? |
|
I'm on node |
|
I did a local test and realized that the problem was the installation of the packages with yarn. Even with yarn up to date and working, the component still has the problem. After running the same configurations with npm, it works perfectly. Can you tell me how to solve it? |
|
I found the solution, it was my package.json config.... i was using "overrides" with yarn instead of "resolutions". Now it works at all! Thanks for all the support @LFDanLu @devongovett @jguddas |
|
Hi there! For me, using the "backdrop" prop prevents the component from working on mobile: when I tap, no reaction. The phenomenon also occurs with the Popover component when the "backdrop" prop is used. OS: Android 13 - Pixel 6a |
|
@MisterHims does it still break if you apply the "backdrop" prop in https://github.com/LFDanLu/android-test/blob/661f4e9e27d9e40361e47f0cdcaf33c6b075498c/app/page.tsx#L13? Curious if this is a separate issue from the erroneous virtual click detection problem. |
|
@MisterHims @LFDanLu are you testing in real devices or are you using the chrome dev tools? |
|
@jrgarciadev I'm using a Samsung Galaxy S22+, Android 13, Chrome 116.0.5845.163. |
Yes, still break with using backdrop="blur" in this case. I also tried with the Microsoft Edge 116.0.1938.64 browser. |
|
Curious, what prints out for you when you tap on button in the example here? |
thank U, its work |
|
|
That looks to be the proper result and would indicate to me that it is more likely that the break with |
|
in my case on xiaomi phones tabs and accordion are not working |
|
FYI the fix was released in the latest version of react-aria! https://react-spectrum.adobe.com/releases/2023-09-07.html |
|
this issue still exist in the latest verison of nextui , using yarn , on native screens it closes once it opens
|
Describe the bug
This does nothing when trying to activate a dropdown item on an Android device. I've tested with 2 different devices. Using the Chrome remote debugger I can activate the item if I click on it on my computer, but tapping on the device does nothing.
Tapping on the tabs does nothing either.
Your Example Website or App
https://nextui.org/docs/components/dropdown#usage
Steps to Reproduce the Bug or Issue
Expected behavior
When an item is tapped, it should close the dropdown and trigger the actions.
Screenshots or Videos
No response
Operating System Version
Android
Browser
Chrome
The text was updated successfully, but these errors were encountered: