x-on mouseover.away event doesn't works on Chrome/Chromium

[LuanHimmlisch]

The following code is for a navbar dropdown. It works perfectly on Mozilla Firefox but on Chromium and Chrome the x-on:mouseover.debounce.50.away="dropdown = false" doesn't triggers and the dropdown stays open.

<span x-data="{ dropdown: false, isPhone: true }" x-on:mouseover.debounce.50="dropdown = true" x-on:mouseover.debounce.50.away="dropdown = false" x-on:resize.debounce.100.window="isPhone = window.innerWidth < 1024 ? true : false" x-init="isPhone = window.innerWidth < 1024 ? true : false">

Check the comparison here

Not even a alert('test') works.

[SimoTod]

Does the event triggers at all when you move on an empty space. Alpine just set a standard event listener on window when you use the away modifier.

Maybe use mouseenter and mouseleave instead (so you don't need debounce)

[ekwoka]

The issue here is that mouse over will trigger (and trigger an away) whenever your mouse moved between elements inside of this.

You should use mouseenter and mouseleave.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event

If the target element has child elements, mouseout and mouseover events fire as the mouse moves over the boundaries of these elements too, not just the target element itself. Usually, mouseenter and mouseleave events' behavior is more sensible, because they are not affected by moving into child elements.