Allow text inputs to focus on mount (#2416)

Author: mikejolley

assets/js/base/components/cart-checkout/totals/totals-coupon-code-input/index.js

@@ -85,6 +85,7 @@ const TotalsCouponCodeInput = ( {
 								setCouponValue( newCouponValue );
 							} }
 							validateOnMount={ false }
+							focusOnMount={ true }
 							showError={ false }
 						/>
 						<Button

assets/js/base/components/text-input/validated.js

@@ -22,6 +22,7 @@ const ValidatedTextInput = ( {
 	ariaDescribedBy,
 	errorId,
 	validateOnMount = true,
+	focusOnMount = false,
 	onChange,
 	showError = true,
 	...rest
@@ -53,6 +54,12 @@ const ValidatedTextInput = ( {
 		}
 	};
 
+	useEffect( () => {
+		if ( focusOnMount ) {
+			inputRef.current.focus();
+		}
+	}, [ focusOnMount ] );
+
 	useEffect( () => {
 		if ( validateOnMount ) {
 			validateInput();
@@ -103,6 +110,7 @@ ValidatedTextInput.propTypes = {
 	ariaDescribedBy: PropTypes.string,
 	errorId: PropTypes.string,
 	validateOnMount: PropTypes.bool,
+	focusOnMount: PropTypes.bool,
 	showError: PropTypes.bool,
 };