[Bug Report] DataTable click:row.ctrl Modifier Not Working

[jim-brown-fst]

Environment

Vuetify Version: 2.1.10
Vue Version: 2.6.10
Browsers: Chrome 78.0.3904.97
OS: Windows 10

Steps to reproduce

<v-data-table ....... @click:row.ctrl="rowCtrlClicked"> ........ </v-data-table>

Expected Behavior

Event handler fires

Actual Behavior

Event handler does not fire

Reproduction Link

https://codepen.io/jim55063/pen/PooXgWY?&editable=true&editors=101#anon-signup

Other comments

I am replacing an existing data table in our application which allows the user to ctrl+click a row in the table and open that item in a new window (tab).

@click:row.once works, since it doesn't require the event object to be passed to the .once event modifier. But for the .ctrl modifier, since you aren't passing the event to the modifier, it can't check to see if the control key is pressed and filters the event out and the handler isn't called.

Also, since the event isn't passed to the handler, there is no way to know if the user had the ctrl key held down when the row was clicked.

[jim-brown-fst]

Other modifiers like .prevent and .stop and probably most others don't work either due to not passing the event object. They throw console errors.

[jacekkarczmarczyk]

click:row is not a DOM event, so these modifiers won't work by default, changing the issue to feature request

[jim-brown-fst]

@jacekkarczmarczyk It starts out as a click event and then the event gets hidden. This happens in a lot of controls and events actually. Can you just add the event as a second parameter in the handlers so we can use them in our code? Passing along the events allows for more use cases (like the one in this issue) and I can't see any downside really.

[nekosaur]

For the .ctrl modifier to work we'd have to pass the native event as the first argument. That also has the added drawback of just giving the method name in template @click.ctrl="nameOfMethod" not working since that only forwards the first argument to the handler. So one would have to do @click.ctrl="(e, foo) => nameOfMethod(foo)" or @click.ctrl="nameOfMethod(...arguments)".

Passing the native event as a second argument is certainly possible, but that means any modifiers will have to be replicated manually.

[jim-brown-fst]

Good idea. Or, you could wrap the data in a single object containing both the event and the object. So e.event would be the event object, and e.data for the "foo" object.

[KaelWD]

That also has the added drawback of just giving the method name in template @click.ctrl="nameOfMethod" not working since that only forwards the first argument to the handler

Incorrect

EDIT: I was mistaken, modifiers break this: vuejs/vue#10867

you could wrap the data in a single object containing both the event and the object

Wouldn't work, the first argument has to be an event for the modifiers to work.

[nekosaur]

Fixed in a7cc135