fix(Popover): prevent need for double click with hover mode on mobile

[moshetanzer]

🔗 Linked issue

There must already be an issue - though havent found one to link.

Here is a link to an issue i opened on new undocs website

unjs/undocs#69

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

When a popover is set to mode=hover, on mobile one is required to press the button twice to open the popover. Have committed most simple fix, could be a better way to do this...

This is quite a big issue since it is being used on all Nuxt website and is encountered in UI Pro templates.

Here is a video of issue:

Screen.Recording.2024-02-25.at.19.03.29.mov

Reproduction of issue is on the ui.nuxt.com docs for popover - just go into mobile simulator or go on actual mobile device:
https://ui.nuxt.com/components/popover

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[moshetanzer]

This PR doesn't seem to have solved the issue on IOS, on chrome mobile simulator was solved though🤔. Any ideas.

[moshetanzer]

Two suggestions I can think of are;

• preventDefault or void() - maybe..
• mouseenter instead of mouseover or mousedown - maybe...

--
another hacky solution could be adding 100ms as default timeout... IOS.... - this would prob work
maybe using @touchstart event and disabling other event... - will also work just a bit hacky
another solution could be to use dynaimc classes and remove hover and use advanced media queries for touch event... using media match pointer coarse

[moshetanzer]

Though android is solved...🙈

[moshetanzer]

Hi @benjamincanac any idea of best way to implement to work both on iOS and android. This literally affects all Nuxt UI websites.

[benjamincanac]

I don't have a clue yet but I agree this is urgent! I'll try to dig as soon as possible

[moshetanzer]

Not sure what your code design standards are. But media query option may be good.

Either options mentioned above, or have allows at this tailwindlabs/tailwindcss#8394

Did a bit more research, these seem to be most useful somehting like this:

media (hover: hover) and (pointer: fine) { .hover\:underline:hover { text-decoration-line: underline; }

Edit
hoverOnlyWhenSupported - doesn't fix issue in IOS.

Happy to do a bit more testing. Let me know your thoughts.

[benjamincanac]

Closing in favor of 70bf4a7 and b50fbcf.