Event listener called multiple times with 'once' modifier

[kazkansouh]

Hello, I noticed that even with marking an event listener with the .once modifier it was still possible for the event handler to be called twice.

I believe the issue is in the following:

alpine/src/directives/on.js

Lines 65 to 77 in b0a482f

	if (! modifiers.includes('self') || e.target === el) {
	const returnValue = runListenerHandler(component, expression, e, extraVars)
	returnValue.then(value => {
	if (value === false) {
	e.preventDefault()
	} else {
	if (modifiers.includes('once')) {
	listenerTarget.removeEventListener(event, handler, options)
	}
	}
	})
	}

Here, after the first time an event listener is called, the thread will yields during the returnValue.then(value => {.... During this time, its possible the event handler to be called again. Maybe the .once check should be performed before the thread yields? Or even set during the addEventListener call.

Some more specifics

I detected with the following (partial) example:

// first copy Bootstrap's 'show.bs.collapse' event as 'show-bs-collapse' as Alpine does not support "." in event names
$( document ).on(
    'show.bs.collapse',
    '.collapse',
    e => e.target.dispatchEvent(new CustomEvent('show-bs-collapse'))
);

Note in the above, this is directing all bubbled events to the initial target which is not a correct but it demonstrates the issue.

Then on an Alpine managed object:

<div class="collapse show">
    <div id='x' class="collapse" x-data="{}" @show-bs-collapse.once="expanded($event.target)"></div>
</div>

This uses a nested div with the collapse class, so the event will be fired twice due to the selector on the above event listener.

Then expanding the nested div to raise the event will cause the issue. e.g. something like (not tested): $('#x').collapse('show'). This quickly raise two events, which on my Chrome browser results in the event handler expanded being called twice.