diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js index af71edcbb5cbf..33639686a311d 100644 --- a/fixtures/dom/src/components/fixtures/text-inputs/index.js +++ b/fixtures/dom/src/components/fixtures/text-inputs/index.js @@ -64,21 +64,36 @@ class TextInputFixtures extends React.Component {
- Text + Empty value prop string + +
+
+ No value prop
- Date + Empty defaultValue prop string + +
+
+ No value prop date input
+
+ Empty value prop date input + +

Checking the date type is also important because of a prior fix for iOS Safari that involved assigning over value/defaultValue - properties of the input to prevent a display bug. This also - triggered input validation. + properties of the input to prevent a display bug. This also triggers + input validation. +

+

+ The date inputs should be blank in iOS. This is not a bug.

diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js index fd5a574fec377..475b444b55dbf 100644 --- a/packages/react-dom/src/client/ReactDOMFiberInput.js +++ b/packages/react-dom/src/client/ReactDOMFiberInput.js @@ -209,16 +209,24 @@ export function postMountWrapper(element: Element, props: Object) { const node = ((element: any): InputWithWrapperState); if (props.hasOwnProperty('value') || props.hasOwnProperty('defaultValue')) { + const initialValue = '' + node._wrapperState.initialValue; + const currentValue = node.value; + // Do not assign value if it is already set. This prevents user text input // from being lost during SSR hydration. - if (node.value === '') { - node.value = '' + node._wrapperState.initialValue; + if (currentValue === '') { + // Do not re-assign the value property if there is no change. This + // potentially avoids a DOM write and prevents Firefox (~60.0.1) from + // prematurely marking required inputs as invalid + if (initialValue !== currentValue) { + node.value = initialValue; + } } // value must be assigned before defaultValue. This fixes an issue where the // visually displayed value of date inputs disappears on mobile Safari and Chrome: // https://github.com/facebook/react/issues/7233 - node.defaultValue = '' + node._wrapperState.initialValue; + node.defaultValue = initialValue; } // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug