Ios

[jelenaZdravkovic]

Hello. I have problem with vue-on-click-outside mixin. Namely, it does not work on IOS devices. Could you help me?

Thanks a lot, Jelena

[kmohrf]

hi jelena,

can you provide some more information about how you’re using the mixin (ideally some source code)? does vue-on-click-outside work for you on other platforms? I need some more information so I can reproduce the issue in order to help you with your problem.

[jelenaZdravkovic]

Hi, I'm using it like this: import { mixin as onClickOutside } from 'vue-on-click-outside';

mixins:[ onClickOutside ],

and on my div I put:

.

Then, I wrote my method closePopup(){ this.activePopup = false }

Code works on Android devices and mobile browser emulator, and, on click, popup window is closed like expected, but the same code does not work on IOS devices. I have tested it on mobile phones, both Android and IOS and this is the result.

Thanks, Jelena

[etekweb]

~~It works on my iPad, but only sometimes. Specifically, when I was setting up stuff in a different component with the development environment in Vue loaded up, it hot-reloaded the iPad, and this module stopped working on it (showing errors in the console such as "callback is not a function"). When I cleared Safari data and loaded the site again, then it worked fine.~~

~~Will update if I find anything more helpful. I tried to reproduce it again in the way I described above, and now I'm not getting the error again. Huh.~~

Update: I'm now pretty sure the above was just a coincidence, as there are cache issues with Vue local development all the time, though you may need to clear cache after doing the following:

I was able to resolve most problems I'd had with iOS and general inconsistency by adding a small timeout between the trigger and the changing variable that triggers display (in your case, this.activePopup). Basically, it's trying to show/hide the popup too quickly. You might fix this like so:

v-on-click-outside="hidePopupOnClickOutside"

watch: { activePopup(){ this.canShowActivePopup = false; setTimeout(() => { this.canShowActivePopup = true; }, 100); } }, methods: { hidePopupOnClickOutside(){ if(this.canToggleNotifications) this.showNotifications = false } }