Is it possible to add support for x-model for other elements (context: shoelace form controls)

[rikbosch]

Hi,

We're using shoelace (https://shoelace.style/) web components in our application. Shoelace has it's own input, radio, select and checkbox controls, which mimic the standard controls.

Binding from an alpine x-data to the controls work correctly, but the binding back does not. This is because shoelace raises it's own events, for example, the checkbox raises sl-change or sl-input instead of change or input events.

Is it possible to customize the events that trigger binding from a form control to an alpine x-data property?

If that is not possible, what would be the closest way to mimic x-model (and it's modifiers..)?

Thanks!

[rikbosch]

Looking at the source of the x-model directive I don't think there is an extension point for this. But I managed to get model binding working with the following code (maybe this can help others as well).

    document.addEventListener("sl-change", (e) => {

        const el = e.target as ElementWithXAttributes;

        if (!el._x_model) {
            // no x-model defined on this element
            return null;
        }

        const setValue = el._x_model.set;

        if (el instanceof SlCheckbox) {
            setValue(el.checked);
        }
        if (el instanceof SlSelect) {
            setValue( el.value);
        }
        if (el instanceof SlRadioGroup) {
            setValue( el.value);
        }
    }) 

[ekwoka]

Really, this is a problem with shoelace. It should be dispatching native input events.

You should raise an issue with them.