Required input immediately marked invalid in Firefox with Ember 2.10

[galfert]

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.

[galfert]

I'm willing to help fix this issue. Any pointers on where I should focus my search for the reason of this bug?

[ghost]

Note that FireFox's implementation on the value + required attribute is actually correct.

https://www.w3.org/TR/html5/forms.html#dom-input-value-value

On setting, it must set the element's value to the new value, set the element's dirty value flag to true, invoke the value sanitization algorithm

[raucao]

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.

[galfert]

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.

[rwjblue]

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?

[galfert]

Does this have the same issue?

No, the input element produced with that snippet doesn't have the same issue.

[rwjblue]

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);

[rwjblue]

AFAICT the only fix for this would be to move to using attributes first, but that requires broader changes (see emberjs/rfcs#314).

[locks]

As mentioned by @rwjblue, fixing this has bigger implications that should be addressed by the linked to RFC. That is why I am marking this as wontfix and closing the issue.
Thanks for the discussion everyone! Go comment on the RFC 😁