Version

3.0.11

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiP...

Steps to reproduce

1. Click with the left mouse button on the button.
2. Click with the left mouse button with pressed shift on the button.
3. Click with the right mouse button on the button.
4. Click with the right mouse button with pressed shift on the button.
5. Click with the middle mouse button on the button.
6. Click with the middle mouse button with pressed shift on the button.

What is expected?

click
click + shift
right click
right click + shift
middle click
middle click + shift

What is actually happening?

click
click + shift
click                    <--- Here is it
right click
right click + shift
middle click
middle click + shift

.stop does not run stopImmediatePropagation to stop propagation to the follow listeners

@click.shift.stop="callback('click + shift')" // .stop has no effect
@click="callback('click')"

I expect that this code will run stopImmediatePropagation() on click events with shift modifier.

The workaround is to manually run stopImmediatePropagation. For example:

@click.shift="$event.stopImmediatePropagation(), callback('click + shift')"
@click="callback('click')"

another workaround

@click.shift.stop="callback('click + shift')"  
-@click="callback('click')"
+@click.exact="callback('click')"

see https://v3.vuejs.org/guide/events.html#exact-modifier

Duplicate of https://github.com/vuejs/vue-next/issues/916

Modifier .stop is equivalent to e.stopPropagation(), not e.stopImmediatePropagation(). But yep, you need to manually execute the e.stopImmediatePropagation() function