textarea with `required` attribute renders in invalid state in FF

[dlaub3]

Bug

When a textarea has the required attribute it renders in the invalid state using FireFox.

This behavior is visible here: https://codesandbox.io/s/rough-frog-f00ow. Remember to view it in FireFox.

I expect the required field to validate on form submit and not before.

I have tested this with FireFox 68 and 69 and React 16.8.6

This appears appears to be a re-occurrence of: #8395

[matjack1]

I'm experiencing this as well

[nhunzaker]

Uh oh. There was a fix for this for inputs, but the textarea code path is different:

react/packages/react-dom/src/client/ReactDOMInput.js

Lines 269 to 277 in 0da7bd0

	// Otherwise, do not re-assign the value property if is empty. This
	// potentially avoids a DOM write and prevents Firefox (~60.0.1) from
	// prematurely marking required inputs as invalid. Equality is compared
	// to the current value in case the browser provided value is not an
	// empty string.
	if (isButton || value !== node.value) {
	node.value = toString(value);
	}
	}

This probably needs to happen on the textarea side too. Probably somewhere in here:

react/packages/react-dom/src/client/ReactDOMTextarea.js

Lines 149 to 162 in 0da7bd0

	export function postMountWrapper(element: Element, props: Object) {
	const node = ((element: any): TextAreaWithWrapperState);
	// This is in postMount because we need access to the DOM node, which is not
	// available until after the component has mounted.
	const textContent = node.textContent;
	// Only set node.value if textContent is equal to the expected
	// initial value. In IE10/IE11 there is a bug where the placeholder attribute
	// will populate textContent as well.
	// https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
	if (textContent === node._wrapperState.initialValue) {
	node.value = textContent;
	}
	}

I think I can fix this pretty quickly, but won't be able to get to it until later in the week if anyone else would like to pick it up.

[nhunzaker]

Just talked with @halvves about taking a stab at this!