When using "Dynamically populated Select Options" x-model is empty on first render

[boustanihani]

When using "Dynamically populated Select Options" x-model is empty on first render.

Expected behaviour: The first value in the list (Red) should be loaded into x-model.

Dynamically populated Select Options
https://alpinejs.dev/directives/model#dynamically-populated-select-options

Also check: #1872

[joshhanley]

This issue has been converted to a discussion as we are now using discussions to track bugs and ideas.
See this announcement for more details #1423

[ekwoka]

Why would it?

You never set anything to the model.

the select does not emit a change event when it gets new options added.

Could you not set the x-model color to red ahead of time?

[boustanihani]

I know I could do that, currently I am using x-init to initialize the value of x-model.

But if you ask me, it would be more elegant, if alpine does this under the hood, upon init.
When x-model is applied to a select element, the value of the first option should be assigned to the model, because this is the default browser behaviour. Or x-model and the dom state would not be in sync on first render..

[ljk0071]

For anyone struggling with cascading selects not updating x-model, here is a "set and forget" solution. It uses a custom directive to watch for DOM changes in the options and forces a refresh.

   document.addEventListener('alpine:init', () => {
        Alpine.directive('watch-options', (el, {}, {cleanup, evaluate}) => {
            const observer = new MutationObserver(() => {
                const modelName = el.getAttribute('x-model');
                if (modelName) {
                    const currentValue = evaluate(modelName);
                    const values = Array.from(el.options).map(opt => opt.value);

                    if (!values.includes(currentValue)) el.dispatchEvent(new Event('change', {bubbles: true}))
                    else if (el.value !== currentValue) el.value = currentValue
                }
            });

            observer.observe(el, {childList: true, subtree: true});

            cleanup(() => observer.disconnect());
        });
    });