Drop down menu not working on mobile

[Sad-Soul-Eater]

All drop-down menus in the extension UI don't respond to touch inputs, but when I connected mouse to my phone I was able to edit settings in drop-down menus.

Browser: Firefox Nightly 107.0a1 and Fennec F-Droid 105.1.0 Extension: 4.0.3 OS: SparkOS 13.1 (Android 13) Device: POCO F2 Pro

I really like your extension and this is only one feature that I miss in firefox on mobile in comparison to chrome, I'll be very thankful if you have free time to fix the issue.

https://user-images.githubusercontent.com/20245745/195457632-296d6421-0ca1-4b64-88f2-2960bf90a0f4.mp4

[vitonsky]

Thanks for your feedback, i will investigate it after next release https://github.com/translate-tools/linguist/milestone/4

I've tested a Linguist on mobile devices and it works fine, but as i see you use not usual OS and device, is it possible that touch events on your device works different of another android phones?

Is you have problems like this with another web sites?

[Sad-Soul-Eater]

Never had problems like this with other websites or extensions, also I noticed one interesting thing: on other sites drop-down menus open a dialog window with a list of items from the menu instead of a regular drop-down like in desktop browsers, but in your extension drop-down opens always as a regular drop-down.

https://user-images.githubusercontent.com/20245745/195567851-a7e9de9d-8460-401e-bf42-607fd80d530e.mp4

[Sad-Soul-Eater]

I tested react-elegant-ui/demo on my phone and the 'select' component does not open, even in chrome 👀

If that could be helpful - I found demo and the dropdown list in it works as expected

[vitonsky]

@Sad-Soul-Eater you've dig deep, thanks. I though about UI kit too, but maybe problem even deeper, in adobe library that handle clicks and touches (react hook usePress) https://github.com/adobe/react-spectrum

I need your help to fix this bug. Could you please check the page https://react-spectrum.adobe.com/react-aria/usePress.html Try to press on button there, make screenshot of events log and attach to this issue

Maybe they fixed this bug and we may just update library.

(optionally) Also, if you can, you may try to:

• clone https://github.com/vitonsky/react-elegant-ui
• run command npm i && npm i @react-aria/interactions@latest
• open terminal in directory examples/components-list of project
• run command npm run build
• open file index.html in browser and try to touch selects and buttons

If it will works fine, then problem in thirdparty library and i will update this library to fix this bug

[Sad-Soul-Eater]

Test results of react-spectrum.adobe.com/react-aria/usePress.html:

Also, I failed to build vitonsky/react-elegant-ui with this errors:

Building in node:14 docker container

Error log

``` node@b858d564fe26:/repo/examples/components-list$ npm run build > @ build /repo/examples/components-list > export NODE_ENV=production && webpack-cli --config webpack.config.js --stats-error-details assets by status 421 KiB [cached] 110 assets cached modules 1.3 MiB (javascript) 1.74 KiB (runtime) [cached] 558 modules ERROR in ../../src/components/Checkbox/Control/Checkbox-Control.tsx 10:27-28 [tsl] ERROR in /repo/src/components/Checkbox/Control/Checkbox-Control.tsx(10,28) TS2344: Type 'T' does not satisfy the constraint '{}'. ts-loader-default_060516610f7976e1 @ ../../src/components/Checkbox/Checkbox.registry/desktop.ts 3:0-62 16:13-28 @ ../../src/components/Checkbox/Checkbox.bundle/desktop.ts 4:0-71 13:43-66 @ ../../src/components/Checkbox/__examples__/common.example.tsx 30:0-54 44:31-39 @ ./src/ComponentsListing.tsx 13:0-116 33:24-36 35:24-45 @ ./src/index.tsx 21:0-56 64:32-49 ERROR in ../../src/hooks/behavior/useInlineKeyboardSearch.ts 115:34-35 [tsl] ERROR in /repo/src/hooks/behavior/useInlineKeyboardSearch.ts(115,35) TS2344: Type 'T' does not satisfy the constraint 'KeyboardSearchItem'. ts-loader-default_060516610f7976e1 @ ../../src/components/Menu/Menu.hocs/withInlineSearch.tsx 25:0-90 51:4-27 @ ../../src/components/Menu/Menu.bundle/desktop.tsx 4:0-65 21:94-110 @ ../../src/components/Select/Select.registry/desktop.ts 7:0-54 31:27-31 @ ../../src/components/Select/Select.bundle/desktop.ts 13:0-67 15:175-196 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/hooks/behavior/useInlineKeyboardSearch.ts 166:42-46 [tsl] ERROR in /repo/src/hooks/behavior/useInlineKeyboardSearch.ts(166,43) TS2345: Argument of type 'T' is not assignable to parameter of type 'T & KeyboardSearchItem'. Type 'T' is not assignable to type 'KeyboardSearchItem'. ts-loader-default_060516610f7976e1 @ ../../src/components/Menu/Menu.hocs/withInlineSearch.tsx 25:0-90 51:4-27 @ ../../src/components/Menu/Menu.bundle/desktop.tsx 4:0-65 21:94-110 @ ../../src/components/Select/Select.registry/desktop.ts 7:0-54 31:27-31 @ ../../src/components/Select/Select.bundle/desktop.ts 13:0-67 15:175-196 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/hooks/behavior/useKeyboardNavigation.ts 169:32-33 [tsl] ERROR in /repo/src/hooks/behavior/useKeyboardNavigation.ts(169,33) TS2344: Type 'T' does not satisfy the constraint 'KeyboardNavigationItem'. ts-loader-default_060516610f7976e1 @ ../../src/components/Menu/Menu@desktop.tsx 26:0-83 51:8-29 @ ../../src/components/Menu/Menu.bundle/desktop.tsx 3:0-54 20:0-32 20:0-32 21:290-301 @ ../../src/components/Select/Select.registry/desktop.ts 7:0-54 31:27-31 @ ../../src/components/Select/Select.bundle/desktop.ts 13:0-67 15:175-196 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/hooks/behavior/useKeyboardNavigation.ts 200:4-9 [tsl] ERROR in /repo/src/hooks/behavior/useKeyboardNavigation.ts(200,5) TS2345: Argument of type 'T[]' is not assignable to parameter of type 'readonly KeyboardNavigationItem[]'. Type 'T' is not assignable to type 'KeyboardNavigationItem'. ts-loader-default_060516610f7976e1 @ ../../src/components/Menu/Menu@desktop.tsx 26:0-83 51:8-29 @ ../../src/components/Menu/Menu.bundle/desktop.tsx 3:0-54 20:0-32 20:0-32 21:290-301 @ ../../src/components/Select/Select.registry/desktop.ts 7:0-54 31:27-31 @ ../../src/components/Select/Select.bundle/desktop.ts 13:0-67 15:175-196 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/lib/compose/types.ts 83:47-48 [tsl] ERROR in /repo/src/lib/compose/types.ts(83,48) TS2344: Type 'T' does not satisfy the constraint '{}'. ts-loader-default_060516610f7976e1 @ ../../src/lib/compose/index.ts 3:0-24 3:0-24 @ ../../src/components/Select/Select.bundle/desktop.ts 2:0-57 15:20-27 15:52-60 15:85-93 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/lib/compose/utils.ts 31:21-22 [tsl] ERROR in /repo/src/lib/compose/utils.ts(31,22) TS2344: Type 'T' does not satisfy the constraint '{}'. ts-loader-default_060516610f7976e1 @ ../../src/lib/compose/compose.tsx 13:0-142 28:17-28 39:35-48 44:20-32 61:31-62 67:21-32 72:21-36 76:16-38 @ ../../src/lib/compose/index.ts 6:0-26 6:0-26 @ ../../src/components/Select/Select.bundle/desktop.ts 2:0-57 15:20-27 15:52-60 15:85-93 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/lib/deepMerge.ts 26:5-31 [tsl] ERROR in /repo/src/lib/deepMerge.ts(26,6) TS2345: Argument of type 'Y[Extract]' is not assignable to parameter of type '{} | []'. Type 'Y[string]' is not assignable to type '{} | []'. Type 'Y[string]' is not assignable to type '[]'. Type 'Y[Extract]' is not assignable to type '[]'. Type 'Y[string]' is not assignable to type '[]'. ts-loader-default_060516610f7976e1 @ ../../src/hooks/useMergeContext.ts 2:0-45 11:46-55 @ ../../src/components/Popup/_target/Popup_target_anchor.tsx 46:0-65 105:31-46 @ ../../src/components/Popup/Popup.bundle/desktop.tsx 11:0-74 15:109-133 @ ../../src/components/Select/Select.registry/desktop.ts 6:0-57 25:37-42 @ ../../src/components/Select/Select.bundle/desktop.ts 13:0-67 15:175-196 @ ./src/index.tsx 22:0-78 50:32-38 ERROR in ../../src/lib/di/index.tsx 62:23-32 [tsl] ERROR in /repo/src/lib/di/index.tsx(62,24) TS2769: No overload matches this call. The last overload gave the following error. Argument of type 'ComponentType

' is not assignable to parameter of type 'string | FunctionComponent<{}> | ComponentClass<{}, any>'. Type 'ComponentClass' is not assignable to type 'string | FunctionComponent<{}> | ComponentClass<{}, any>'. Type 'ComponentClass' is not assignable to type 'ComponentClass<{}, any>'. Types of property 'getDerivedStateFromProps' are incompatible. Type 'GetDerivedStateFromProps | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'. Type 'GetDerivedStateFromProps' is not assignable to type 'GetDerivedStateFromProps<{}, any>'. Types of parameters 'nextProps' and 'nextProps' are incompatible. Type 'Readonly<{}>' is not assignable to type 'Readonly

'. ts-loader-default_060516610f7976e1 @ ../../src/components/Select/Select.bundle/desktop.ts 1:0-47 15:162-174 @ ./src/index.tsx 22:0-78 50:32-38 webpack 5.74.0 compiled with 9 errors in 405 ms ```

[vitonsky]

I will fix TS compiler errors and we should try it again later.

As i see on screenshot, your pointer type name is virtual that is unusual and i can't found info about it. I will investigate, stay tune

[Sad-Soul-Eater]

I run this code on codesandbox.io on my mobile, and in the console that reports touch

window.addEventListener("pointerdown", detectInputType);

function detectInputType(event) {
  console.log(event.pointerType)
}

---

Also if this could be useful, I found this: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/isVirtualEvent.ts Seems there is something about android and virtual pointer/click events ~// Idk have no experience with js 😅~

[vitonsky]

I found the problem cause

virtual value set here: https://github.com/adobe/react-spectrum/blob/1b4d3af728d7eed74834601cc796ffb4ecd89966/packages/%40react-aria/interactions/src/usePress.ts#L321-L324

And here we ignore virtual touches https://github.com/vitonsky/react-elegant-ui/blob/4120f51caf356e44502404104fc6ddcddc163471/src/components/Select/Select%40desktop.tsx#L188

It looks as problem with react-aria library, i have plans to replace it to my own implementation UI primitives.

As temporary solution i have to consider remove code to ignore virtual events. This fix is require a tests on UI library side to prevent breaking changes

[LynxPDA]

Faced the same problem on android. It may be useful:

1. When connecting a mouse via USB OTG menu works and clicks without problems, does not respond only to the touchscreen.

2. It seems to have already solved the problem https://github.com/nextui-org/nextui/issues/1349 and https://react-spectrum.adobe.com/releases/2023-09-07.html

[vitonsky]

@LynxPDA sounds good! I will investigate this problem. What phone model, operation system and browser you use?

I tried to reproduce on Realme 8 Android 12, i cannot to reproduce it stable, but i got this problem few times one year ago

[LynxPDA]

@vitonsky
Xiaomi Mi 10T Android 12 SKQ1.211006.001 MIUI Global 14.0.1 Firefox Nightly 123.0a1