react: Firefox validation triggers on input component render

When using native form validation and loading a page with a form containing an input with the required prop set, it triggers browser validation immediately. This produces Firefox’s native error highlighting. This is because Firefox appears to run validation when the DOM is used to set a value on an existing input component.

The behavior can be seen here: http://codepen.io/anon/pen/zowOzo

Angular has run into this already.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 17 (11 by maintainers)

Most upvoted comments

Ah, you are correct. Thank you. I’ll send out a PR for this shortly.

nhunzaker on May 29, 2018

Huh. Got it. You have to use setAttribute('type', 'x') instead of node.type = 'x'.

This is out for review in: https://github.com/facebook/react/pull/11202

nhunzaker on Oct 12, 2017

This appears to have been introduced in 15.2 as a result of #6406. This line -https://github.com/facebook/react/blob/master/src/renderers/dom/stack/client/wrappers/ReactDOMInput.js#L236 - is setting the value of the node explicitly to detach it from the defaultValue but doing so triggers validation which firefox displays feedback on immediately.

Textareas also suffer from the same problem.

I am happy to spend more time working on a solution if this is considered to be an actual React issue and not a problem with Firefox itself.

peternewnham on Dec 4, 2016