Nested context/dropdown menu can't be opened on mobile

[pawelblaszczyk5]

Describe the bug Nested context/dropdown menu can't be opened. Clicking on the trigger properly focuses it but the submenu isn't opened.

To Reproduce Steps to reproduce the behavior:

1. Go to context/dropdown menu on docs
2. Open the first menu example
3. Try to open the nested "GitHub" sub menu
4. Sub menu is not opened

Expected behavior Sub menu should be probably opened

Screenshots

https://user-images.githubusercontent.com/54995479/213496363-58b2d0af-c7bf-441d-a176-d9549cf900b4.mp4

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

• Device: Xiaomi Poco F2 Pro
• OS: Android 12
• Browser: Chrome
• Version: 109.0.5414.85

Additional context

I tried to debug the problem with mobile inspector. There aren't any errors and the submenu error is properly triggered. What's interesting is the fact that when I triggered clicks from inspector emulator it worked on phone. Maybe some issue with virtual pointer and press primitive? 🤔

I was testing it a bit there. Clicks from my mobile device are detected as "virtual" via usePress primitive and they behave a bit strangely. Basically after I tap the button no event is triggered, and after releasing it all "press start with virtual", "press end with virtual" and "press with virtual" show up.

[thetarnav]

Android 10, chrome as well

https://user-images.githubusercontent.com/24491503/213865149-301c6bbe-ded4-4791-947b-4181a42f69e9.mp4

[fabien-ml]

@pawelblaszczyk5 you've found the specific combination of hardware, os and browser that break the thing 😅.

[pawelblaszczyk5]

I'll try to tackle it tomorrow ☺️

[pawelblaszczyk5]

Okay, so I played with it a bit and it seems to be related to to detecting presses from my mobile device as a "virtual".

https://github.com/fabien-ml/kobalte/blob/7b5e0d61b9c2eea3e4ad6c98fb91a10430957dfe/packages/core/src/menu/menu-sub-trigger.tsx#L131-L138

Here in the menu sub-trigger there is a check whether it's a "touch" "pointerType" and the sub-menu is opened only in that case. As I mentioned before, my device is detected as a "virtual" however 😞 So I tried to check, why it's treated like that.

https://github.com/fabien-ml/kobalte/blob/ecc19f3d7b53a7b9a3d0bc9c4be00774affa3de1/packages/utils/src/is-virtual-event.ts#L38-L53

The pointerDown events on my device are somehow triggered with "width" and "height" set to "0". I know it's a code ported from React Aria and it seems that unfortunately this isn't a reliable way of detecting whether a pointer event is virtual.

[fabien-ml]

fixed in v0.6.0 since we do not use onPress anymore.