Open benr77 opened 1 year ago
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?
As far as I am aware this issue is still outstanding.
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?
Using
2.x.dev
which includes #728, and latest Stimulus Bridge3.2.2
.This is a bit of a weird one. If I for example use an
EntityType
or aChoiceType
to generate a<select>
element, and I do not use aplaceholder
value, we will get HTML such as: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.