Alpine ignores events triggered by JQuery

[MartinMystikJonas]

I just spent few hours solving strange issue. We use jQuery plugin to decorate number input fields with nice [+] and [-] buttons. These buttons changed value of input with x-model but Apline did not reacted to it. Apline ignored events triggered by jQuery.

After some investigation I found out it was caused by some incompatibility of jQuery triggered events ($(el).trigger("input")) with Apline listeners. I am still not sure what is the difference between native and jQuery event that is causing this. We solved it by creating custom version of that jQuery plugin and replacit jQuery trigger with native el.dispatchEvent(new Event('input')) and now everything works.

I just wonder if there is any know way how to solve issue without creating and maintaining custom versions of that jQuery plugin? What is the reason jQuery events cannot be listened for by Alpine?

[SimoTod]

It's because jquery events are not standard ones, they are just a jQuery implementation to imitate the native event system. Alpine just use standard listeners under the hood (the one you could create with document.addEventListener).
Usually the options are:

1. you find a vanilla js version of that plugin
2. the jquery plugin offers hooks where you can dispatch standard events
3. you write something custom (like you did)

[SimoTod]

You need to ask Caleb since he's the maintener

[MartinMystikJonas]

@calebporzio What dou you think about this feature? I think I am not only one who would appreciate way to enable compatibility with jQuery events.

[MartinMystikJonas]

I drafted a PR here #2063

[SimoTod]

Ideally, you should add tests to avoid future regressions but also prove that the current critical features are still working (x-model, $dispatch, x-on itself).

[MartinMystikJonas]

I tried to draft tests as well but I am afraid it is beyond my skills.

I wrote it like this:

import { haveText, html, test } from '../utils'

test('can use jQuery events',
    html`
        <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.setListenerManipulators(
                    (target, event, handler, options, modifiers) => { $(target).on(event, handler) },
                    (target, event, handler, options) => { $(target).off(event, handler) }
                )
                $("span").trigger("click")
            })
        </script>

        <div x-data="{val: 'old'}">
            <span @click="val='new'" x-text="val"></span>
        </div>
    `,
    ({ get }) => get('span').should(haveText('new'))
)

But for some reason jQuery is not included and $ is undefined and I do not know what to do about it. Sorry.

But when I test my custom build manually in browser with our code it works