Repository navigation
Required input immediately marked invalid in Firefox with Ember 2.10 #14737
Description
Activity
- changed the title
[-]Required input immediately marked invalid in Firefox[/-][+]Required input immediately marked invalid in Firefox with Ember 2.10[/+]on Dec 19, 2016 I'm willing to help fix this issue. Any pointers on where I should focus my search for the reason of this bug?
Should be possible to fix in Glimmer, if it's a regression:
This is not the case in Ember 2.9.0, where the field is only marked as invalid when trying to submit the form with the field being empty.
@martndemus Is validation the same as sanitization there? Dirty value would just mean it changed, whereas the validation should only kick in when either asking for it via the DOM API, or submitting the form afaik.
This is just a hunch, but could it be that Glimmer first inserts the input into the DOM and only then sets the value to the bound property? That might trigger Firefox's validation.
Hmm, this is surprising actually. Can someone double check if the same thing happens with plain JS?
let el = document.createElement('input'); el.setAttribute('type', 'input'); el.setAttribute('required', 'true'); el.setAttribute('value', ''); document.body.appendChild(el);
Does this have the same issue?
Does this have the same issue?
No, the input element produced with that snippet doesn't have the same issue.
OK, so the following is what we are doing internally today:
let el = document.createElement('input'); el.value = ''; el.setAttribute('required', ''); document.body.appendChild(el);
This shows the same issues as the twiddle.
However, the following does work properly:
let el = document.createElement('input'); el.setAttribute('value', ''); el.setAttribute('required', ''); document.body.appendChild(el);
AFAICT the only fix for this would be to move to using attributes first, but that requires broader changes (see emberjs/rfcs#314).
There seems to be a regression in Ember 2.10.0 in regards to required input fields.
In Firefox an input field
{{input value=foo required=true}}is immediately marked as invalid (showing a red border around the field).This is not the case in Ember 2.9.0, where the field is only marked as invalid when trying to submit the form with the field being empty.
I created an Ember Twiddle to reproduce it.