symfony
[LiveComponent] No selected <option> treated differently when submitted from a Live Component
Using 2.x.dev which includes #728, and latest Stimulus Bridge 3.2.2.
This is a bit of a weird one. If I for example use an EntityType or a ChoiceType to generate a <select> element, and I do not use a placeholder value, we will get HTML such as:
<select>
<option value="1">Option One</option>
<option value="2">Option Two</option>
</select>
When this is rendered by the browser, if no option is selected, and there is no placeholder option, the first option "Option One" will be shown, but without a selected attribute.
In a normal Symfony form in a standard POST submission, the browser seems to send the "Option One" as though the user had physically selected it. For example, a NotBlank() validation would PASS.
The Problem
If you then move this form into a LiveComponent, the behaviour changes.
Submitting the form without touching the select element does NOT assume that the first element is implicitly selected, and null is sent as the select field's value.
This means any NotBlank() validation FAILS, even though as far as the user is concerned, the "Option One" was selected (it was shown as the selected entry in the form field, even though they didn't physically click on it).
This then makes a mess when submitting the form, as you get a validation error, and you have to go and click and select the option that is already, as far as you the user is concerned, selected.
I'm guessing this is to do with the way that the Live Component's JS submits the form, and that this is differing in this case with a standard browser form submit.
For the moment I have managed to get around this problem by automatically selecting the first <option> if there is no placeholder or existing selected option:
export default class extends Controller {
connect () {
const selects = this.element.querySelectorAll('select');
selects.forEach((select) => {
if (select.querySelector('[value=""]') === null && select.querySelector('[selected]') === null) {
select.querySelector('option:first-child').setAttribute('selected', 'selected');
select.dispatchEvent(new Event('change', { bubbles: true }));
}
})
}
}
Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?
Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?
I have not tested with the latest release yet, so do not know if it's still an issue. Please keep the issue open for now.
I don't believe this has been addressed yet, as we've encountered several issues related to it. Would you be interested in submitting a PR?
Hey, thanks for your report! There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?
Friendly ping? Should this still be open? I will close if I don't hear anything.
Hey,
I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!
Hey, thanks for your report! There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?
