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

Mouse[enter/over/leave/out] events suppress click event on iOS in Vue 2.6.x #9859

Closed
nathantreid opened this Issue Apr 10, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@nathantreid
Copy link

nathantreid commented Apr 10, 2019

Version

2.6.10

Reproduction link

https://github.com/nathantreid/vue-bug-ios-mouseevent

Steps to reproduce

  1. Using iOS Safari, tap the first or second button. The mouseenter or mouseover event is logged, but the click event is not fired.
  2. Tap the same button again and the click event will fire.
  3. Tap any other button. The mouseleave or mouseout event is logged, but the click event is not fired.
  4. Tap the same button again and the click event will fire.

How to create a reproduction from scratch:
Scenario A: mouseenter / mouseover

  1. Add a mouseenter or mouseover event to an element
  2. Add a button with a click handler inside the element from step 1
  3. Tap on the button.

Scenario B: mouseleave / mouseout:

  1. Add a mouseleave or mouseoout event to an element
  2. Add a button with a click handler outside the element from step 1
  3. Tap on the element.
  4. Tap on the button.

What is expected?

The click event should fire on the first tap. This is what happens in Vue 2.5.17 and 2.5.22.

What is actually happening?

The click event requires a second tap in order to trigger. This only happens in Vue 2.6.x.


I attempted to create a fiddle to reproduce this, but it works properly in the fiddle: https://jsfiddle.net/nathantreid/twcqg9jh/2/
My GitHub reproduction was created using the vue-cli.

@posva

This comment has been minimized.

Copy link
Member

posva commented Apr 10, 2019

this is due to the changes in micro/macro task in 2.6 (make sure to check the release notes)
You should be able to use a .capture modifier to correctly trap the event

@posva posva closed this Apr 10, 2019

@nathantreid

This comment has been minimized.

Copy link
Author

nathantreid commented Apr 10, 2019

Thanks, I had read the notes but wasn't sure if that was what caused the issue and if it was expected behavior. .capture doesn't work in this case. However, thanks to your confirmation that this is caused by switching back to microtasks and after learning that iOS Safari suppresses click events when mouseenter/mouseleave changes the DOM, I was able to work around the issue by using setTimeout to schedule the DOM modifications caused by mouseenter/mouseleave as a separate task, e.g.:

<div
      @mouseenter="handleMouseEvent('mouseenter')"
      @mouseleave="handleMouseEvent('mouseleave')"
    >
      <button @click="count++">
        Increment button inside mouseenter / mouseleave
      </button>
    </div>
methods: {
    handleMouseEvent(eventName) {
      setTimeout(() => {
        // Code that changes the DOM must go here
        this.debugLog.push(eventName);
      }, 0);
    },
  },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.