Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover @click isn't triggered on IOS #1024

Open
RoyvanEmpel opened this issue Feb 2, 2024 · 10 comments
Open

Popover @click isn't triggered on IOS #1024

RoyvanEmpel opened this issue Feb 2, 2024 · 10 comments

Comments

@RoyvanEmpel
Copy link

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
Copy link
Author

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

@trobonox
Copy link

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
Copy link
Author

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

@RLans
Copy link

RLans commented Feb 14, 2024

@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
Copy link
Author

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

@davyjansen
Copy link

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
Copy link

Experiencing the same issue.

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

@trobonox
Copy link

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
Copy link
Author

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants