.prevent doesn't work when event scope is .window

[rileysiemens]

I am trying to make a search modal appear when the user presses / however, this shortcut is used by my browser (Firefox), and I can't seem to get prevent to work.

e.g.

<div x-data="{ searchOpen: false }">
  <div x-show="searchOpen"
    @keyup.escape="searchOpen = false"
    @keyup.prevent.window.slash="searchOpen = true"
    >
    <-- search form -->
    </div>
</div>

Am I doing something wrong, or is this a bug?

PS- I get the same results when using ctrl+k so bonus points if the solution fixes that as well.

[SimoTod]

Have you tried . document modifier instead of .window? Depending on where the browser set its global listeners, it may be too late for .prevent

[SimoTod]

Also, you probably want .stop, not .prevent

[rileysiemens]

Thanks for the suggestions.

So far none of these have worked in Firefox (but all 4 work in Brave/Chrome)

1. @keyup.stop.document.slash
2. @keyup.stop.window.slash
3. @keyup.prevent.document.slash
4. @keyup.prevent.window.slash

Does the order of the modifiers make a difference (i.e. document.stop vs stop.document)?

[ekwoka]

The order doesn't matter for those modifiers.

On thing I'd test is if manually registering a similar handler on the document and calling prevent would do anything.

What is it you're trying to prevent though?

[SimoTod]

<div x-data @keydown.stop.prevent.document.meta.k="console.log('pressed')">

This one works okay for me (I'm on MacOS)

[magnusskare]

PSA: The meta key maps to CMD on MacOS and the Windows-key on Windows, which opens the start menu and can't be prevented AFAIK. Would recommend using CMD and CTRL instead of meta alone.

[rileysiemens]

@keydown.document.prevent.slash="searchOpen = true"
@keydown.document.prevent.ctrl.k="searchOpen = true"

These both work. Needed to use @keydown not @keyup.

[hudon]

I think there is a regression or something I don't understand that is related to this. I have a "drag and drop" div, like so:

<div
         @dragover.stop.prevent.throttle="isDraggingOver = true"
         @dragover.prevent.window.throttle.500ms="handleOutsideDragover($el, $event)"       
         @drop.prevent="alert('heya')"
><p>test</p></div>

Using Alpine 3.10.5 or 3.12.0, when I drag a file into this div, handleOutsideDragover is called. It shouldn't, because the first dragoverhandler would be handled first (the drag is happening within this div), and the .stop modified would prevent it from bubbling. But it somehow still bubbles. Also, it isn't preventing the default action, as dropping the file opens it, rather than alerting with "heya".

By accident while debugging I pulled in Alpine.js 2.3.0, and this behaves as expected: dragging over the div does not call handleOutsideDragover, but dragging outside the div does. Plus, dropping the file on the div correctly creates an alert with "heya".

Safari 16.3

[hudon]

ah, I removed throttle and this works as expected. I'm convinced this is a bug now, but maybe unrelated to this original discussion... I'll start a new thread or submit a PR