[Bug]: HoverCardTrigger is untappable on mobile

[remonke]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-kklahm?file=app.vue

Steps to reproduce

1. Create a HoverCard
2. Try to tap on it with a touch pointer

Describe the bug

A user cannot press on a link with a HoverCard.

Expected behavior

No response

Context & Screenshots (if applicable)

Screencast_20240401_011302.webm

[zernonia]

This was by designed as mentioned here
As this component only cater for "Hover" interaction, maybe you should consider using Popover.

[remonke]

But it's not like I can't open the hover card (which I can), but I can't simply tap on the link on mobile.

[remonke]

Okay I did some digging and appearently Vue registers touchstart listener as a non-passive listener, while React uses a passive listener. As a result, e.preventDefault() on touchstart in Vue prevents any actions on the target, while in React it logs an error to the console.

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button
          onClick={() => setCount((count) => count + 1)}
          onTouchStart={(e) => {
            e.preventDefault();
          }}
        >
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++" @touchstart.prevent="">
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

[ChrisGV04]

@zernonia I see what @remonke means...

He's not having issues with hovering to view the HoverCardContent. That is working just fine.

The issue is that the link doesn't even work on touch devices. If you tap the link it doesn't go to the href at all.

[zernonia]

Thanks for the clarification guys! Yup I see the issue here now 😁