bug: Mobile accessibility

[khairulhaaziq]

Several issues I come across quickly when trying with mobile and safari

• Dropdown wont close on click outside Feat: Dropdown Menu #9
• Select wont close on click outside Feat: Select #19
• Toggle(single) is hard to toggle, ToggleItem in ToggleGroup is fine
• ToggleGroupItem focus styling issue

Docs

• input border not showing(prob safari issue)

[sibbng]

Hi, I'm from the VueUse team. I contributed onClickOutside to the library. I would like to give you a brief history of how it works.

First, onClickOutside use a click event instead of a pointerdown event. If you are aiming for 100% compatibility with the Radix UI I would suggest you register your own pointerdown listener similar to how they did.

The reason we use the click event instead of pointer events is to let you interact with the scrollbars without triggering the outside event. This is useful if you don't have a scroll-lock mechanism or have a very long modal inside a container. Back in time, Adam also struggled with that in Headless UI and they ended up doing the same thing we did in VueUse.

Actually, we already have a workaround for that Safari issue but apparently, it doesn't work when body has pointer-events: none.

[zernonia]

That's some super valuable insight @sibbng ! Appreciate it!

[sibbng]

Can you try adding that line to where it is appropriate?

document.documentElement.addEventListener('click', () => {})

This should fix the outside click issue on Safari iOS. If it works for you I can move this fix to our iOS workaround.

[khairulhaaziq]

Can you try adding that line to where it is appropriate?

document.documentElement.addEventListener('click', () => {})

This should fix the outside click issue on Safari iOS. If it works for you I can move this fix to our iOS workaround.

hi @sibbng thanks so much for this. This is a great help!. I'm not entirely sure what do you mean and where would we put it. Do you want to create a PR for the fix?

[sibbng]

Hi, I pushed a fix in VueUse. The fix is released as part of v10.3.0. Based on my tests, it fixes the outside click issues on iOS. Can you confirm that the outside click issues have been resolved for you as well?

[khairulhaaziq]

Hi, I pushed a fix in VueUse. The fix is released as part of v10.3.0. Based on my tests, it fixes the outside click issues on iOS. Can you confirm that the outside click issues have been resolved for you as well?

Thanks so much! Fixed!