Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.31k stars 338 forks source link

Popover @click isn't triggered on IOS #1024

Open RoyvanEmpel opened 8 months ago

RoyvanEmpel commented 8 months ago

Sadly it still seems broken on IOS and ipadOS devices. Using @click or @mousedown both don't work with ios. The popper closes before it triggers the @click or the @mousedown.

We tested it on 4 iphones and 1 ipad and it doesn't work on those devices, we tested safari and chrome. It does work on MacOS, Windows, Linux and Android.

RoyvanEmpel commented 8 months ago

Any other people experiencing this? We can't get any clicks to work in our production environment with the latest versions.

trobonox commented 7 months ago

Same here, inside a Tauri app no @click events are registered for any button, it just closes before triggering anything. Do you have the v-close-popper directive on those buttons by any chance? It seems to be a change in the behaviour where it just closes and doesn't register any other click event at all.

The last version that works with the expected behaviour for me is 5.0.3.

RoyvanEmpel commented 7 months ago

Yes i do use the v-close-popper directive on the buttons.

RLans commented 7 months ago

@Akryum Same problem for me v5.2.2. It works on desktop and android, but not on iphone and ipad.

<template>

  <VDropdown>
    <a href="javascript: void(0)">
      More <i class="mdi mdi-chevron-down"></i>
    </a>

    <template #popper>
      <ul>
        <li
          @click="doSomething();"
          v-close-popper>
          <span><i class="mdi mdi-file-document-outline"></i> View file</span>
        </li>
      </ul> 
    </template>
  </VDropdown>

</template>

<script setup>

const doSomething = () => {
  alert('do something');
}

</script>
RoyvanEmpel commented 7 months ago

It does work when i replace @click="doSomething();" v-close-popper> with @click="doSomething(); $refs.MyDropdown.hide()">

davyjansen commented 7 months ago

Hi! We've encountered the same bug with iOS and wanted to confirm that we're experiencing this issue as well. It's blocking every click. Any insights or updates on a potential fix would be greatly appreciated.

Thanks for your efforts on this,

STEEZENS commented 7 months ago

Experiencing the same issue.

Currently using the hide slot prop as a workaround: https://floating-vue.starpad.dev/guide/component#hide-from-slot

trobonox commented 6 months ago

Any updates on this issue? Willing to give a shot at contributing a fix if I could get a pointer where I could start looking (so it's not a needle in a haystack type of situation).

RoyvanEmpel commented 6 months ago

Any updates on this issue? Willing to give a shot at contributing a fix if I could get a pointer where I could start looking (so it's not a needle in a haystack type of situation).

From the quick look that i had at the code it has to do with the ontouch that is used on mobile in the v-close-popper.ts. The ontouch seems to be triggered before the onclick. Maybe manually trigging the contents of the onclick attribute on mobile/ios is an option? Or just using the onclick on IOS but i am guessing that there is prob a reason that hasn't been done. I don't know how to build a package maybe you know how to 🤷🏻‍♂️ and can try.

lukaszarpak commented 4 months ago

We're experiencing the same thing. Why isn't anything done regarding this issue?