iOS

[sanyashvets]

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]

This looks similar to https://github.com/simplesmiler/vue-clickaway/issues/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]

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]

Any news on this?

[vsg24]

Anything??

[simplesmiler]

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]

@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]

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

[bmfteixeira]

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

[zanematthew]

👍

[simplesmiler]

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

[bmfteixeira]

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

[bmfteixeira]

@simplesmiler any news?

[ohmycody]

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

[simplesmiler]

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]

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]

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.