[LiveComponent] Select list with no empty choice considered empty

[jcrombez]

When using a FormType in a LiveComponent, if your form contains a select field with no empty option, the browser autoselect the first one by default.
But since the form itself had no value for this field, if the user keep the default value, the component data is never updated with it and the user get a validation error for missing value on a field he sees with a value.

[weaverryan]

This looks legitimate to me. In your Symfony form, the field (e.g. country) has no value. But since there is no blank value (e.g. "choose a country"), then in practice, the first country in the list is auto-selected. If the user never changes this field, then the first country is never set onto the "live components" data.

I've purposely avoided doing this until now, but the only solution I can think of is:

A) When the live controller loads, find all "model" inputs
B) Read the "value" of the model input and "set" it back into the client-side component data.

So basically, on load, we look for all model fields and "synchronize" their value back to the component data.

[jcrombez]

I don't know if it's related, i suspect it is but, if some javascript modify a field value, it doesn't update the component state and when the user manually trigger a change, the field is back to its value before any javascript modificaiton.

[weaverryan]

That is a separate issue. If some external JavaScript modifies the value of a field directly, as far as I know, there is no way for live component to "hook into that" (e.g. via a listener) and update the model. That external JavaScript needs to trigger an input or change event on that element after setting the value. This is something that should be documented

[weaverryan]

I'm working on this in #472 - but the documentation for changing fields via JavaScript is already there :)

[jcrombez]

Thank you 👍