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

iOS #13

Open
sanyashvets opened this issue Apr 4, 2017 · 16 comments
Open

iOS #13

sanyashvets opened this issue Apr 4, 2017 · 16 comments

Comments

@sanyashvets
Copy link

Event doesnt fires on iOS. I checked it on iPad.
( I have modal with v-click-away installed on modal's content and in all other devices everything is fine, but in iPad case event doesnt fired up.)
I have no other iOS, so I cant check it. If I open chrome devtools and choose iPad - it works

@simplesmiler
Copy link
Owner

This looks similar to #7

There are two reasons that this could happen:

  1. Click events don't reach the document root. Unfortunately I don't know a good solution for this. Probably the best way is to support specifying the event v-click-away reacts to, e.g. v-click-away.mousedown="awayHandler".
  2. Your content does not entirely fill the viewport, and events are not produced when you click below the content.

@bmfteixeira
Copy link

This might help:

On a different website that I'm developing (using ES6, but not Vue), I got this working on iOS by using the touchstart event inside the window load. Seems like iOS devices don't bind the events to the window until its load.

Check the code below:
https://cl.ly/012x151a1b0T

The touchevents class is a class I had when the device supports touch events (this includes Android, iOS, ...). Let me know if you need any help.

@bmfteixeira
Copy link

Any news on this?

@vsg24
Copy link

vsg24 commented Aug 2, 2017

Anything??

@simplesmiler
Copy link
Owner

Unfortunately, I don't have an apple device to test on, so I still don't have a solution.
Regarding support for specifying event, there's #14, I will gladly accept a pull request.

@bmfteixeira
Copy link

@simplesmiler, I might try to help if I have time to which will not be soon (next weeks). If you wish to, I can try to help guide you through the issue fix (which I've done multiple times, but not using Vue).

The main problem is how the event is attached. On iOS devices it's a bit more tricky. Check the code below:
https://cl.ly/012x151a1b0T

@zanematthew
Copy link

FWIW, the JS fiddle linked from your NPM page; https://jsfiddle.net/simplesmiler/4w1cs8u3/ works just fine on the latest iOS.

@bmfteixeira
Copy link

Yes but still, older versions of the OS should be supported.

@zanematthew
Copy link

👍

@simplesmiler
Copy link
Owner

Now there is an iPad accessible to me, and I will try to hunt down the issue this weekend.

@bmfteixeira
Copy link

Great @simplesmiler ! Check this code: https://cl.ly/012x151a1b0T
Was my work around for non-Vue projects. Can help.

@bmfteixeira
Copy link

@simplesmiler any news?

@ohmycody
Copy link

Me helped it: http://gravitydept.com/blog/js-click-event-bubbling-on-ios

@simplesmiler
Copy link
Owner

simplesmiler commented Apr 8, 2018

So I've made a round of tests on iPad 4 with iOS 10.3.3 using Safari.

From what I could gather:

  • Safari is finicky with caching. When you close the page and open it again, you are sometimes presented with a cached version of the page, which has a lot potential to severely disrupt debugging.
  • I ended up with the simplest setup working fine, but it took some time to get it right. Note that I used the latest version (2.2.1), but previous versions (except of 2.2.0) are fine too.

Gist: https://gist.github.com/simplesmiler/b4f1c29cc5251d574014d85c44478e66

I invite everyone (especially @sanyashvets and @bmfteixeira) to test it and see if it works. If it doesn't, then I'd like to know what hardware and software you are using.

nono0481 pushed a commit to nono0481/vue-clickaway that referenced this issue Oct 29, 2018
Related to this issue : simplesmiler#13
@nono0481
Copy link

I have a similar pb on iPad (iOS 10.3.3) on my application with vue-clickaway (version 2.2.2).
When I use touchstart instead click event it work fine.

I create a PR to fix this issue.

@imtbl
Copy link

imtbl commented Jan 19, 2019

I've run into the same issue and switched to v-click-outside instead. Works fine for me and seems to have more active development.

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

No branches or pull requests

8 participants