From 9b88b78b3d61e8fe81968d59b74592d5a53540b7 Mon Sep 17 00:00:00 2001
From: Nick Reiley <bloomber111@gmail.com>
Date: Wed, 1 Apr 2020 23:30:26 +0500
Subject: [PATCH] Fix email cursor jump (#18379)

* add email input fixture to show cursor jump

* fix cursor jump in email input

Co-authored-by: Peter Potapov <dr.potapoff-peter@yandex.ru>

* add regression tests to ensure attributes are working

Co-authored-by: Peter Potapov <dr.potapoff-peter@yandex.ru>
---
 fixtures/dom/src/components/Header.js         |  1 +
 .../EmailDisabledAttributesTestCase.js        | 39 +++++++++++
 .../EmailEnabledAttributesTestCase.js         | 48 +++++++++++++
 .../email-inputs/JumpingCursorTestCase.js     | 39 +++++++++++
 .../components/fixtures/email-inputs/index.js | 68 +++++++++++++++++++
 .../react-dom/src/client/ReactDOMInput.js     |  4 +-
 .../react-dom/src/events/ChangeEventPlugin.js |  8 ++-
 7 files changed, 203 insertions(+), 4 deletions(-)
 create mode 100644 fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/email-inputs/index.js

diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index 77c1ecfc30da6..c2a8c8d945030 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -71,6 +71,7 @@ class Header extends React.Component {
                 <option value="/text-inputs">Text Inputs</option>
                 <option value="/number-inputs">Number Input</option>
                 <option value="/password-inputs">Password Input</option>
+                <option value="/email-inputs">Email Input</option>
                 <option value="/selects">Selects</option>
                 <option value="/textareas">Textareas</option>
                 <option value="/input-change-events">
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js
new file mode 100644
index 0000000000000..a844578550e8e
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/EmailDisabledAttributesTestCase.js
@@ -0,0 +1,39 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class EmailDisabledAttributesTestCase extends React.Component {
+  state = {value: 'a@fb.com'};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="email" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default EmailDisabledAttributesTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js
new file mode 100644
index 0000000000000..e5448a2b9b9b0
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/EmailEnabledAttributesTestCase.js
@@ -0,0 +1,48 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class EmailAttributesTestCase extends React.Component {
+  state = {value: 'a@fb.com'};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              pattern=".+@fb.com"
+              maxlength={17}
+              multiple={true}
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input
+              type="email"
+              defaultValue=""
+              pattern=".+@fb.com"
+              maxlength={17}
+              multiple={true}
+            />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default EmailAttributesTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js b/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js
new file mode 100644
index 0000000000000..e95653967448d
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/JumpingCursorTestCase.js
@@ -0,0 +1,39 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class JumpingCursorTestCase extends React.Component {
+  state = {value: ''};
+  onChange = event => {
+    this.setState({value: event.target.value});
+  };
+  render() {
+    return (
+      <Fixture>
+        <div>{this.props.children}</div>
+
+        <div className="control-box">
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="email"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">
+              {' '}
+              Value: {JSON.stringify(this.state.value)}
+            </span>
+          </fieldset>
+
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="email" defaultValue="" />
+          </fieldset>
+        </div>
+      </Fixture>
+    );
+  }
+}
+
+export default JumpingCursorTestCase;
diff --git a/fixtures/dom/src/components/fixtures/email-inputs/index.js b/fixtures/dom/src/components/fixtures/email-inputs/index.js
new file mode 100644
index 0000000000000..1af9d2b2fa5fb
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/email-inputs/index.js
@@ -0,0 +1,68 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import JumpingCursorTestCase from './JumpingCursorTestCase';
+import EmailEnabledAttributesTestCase from './EmailEnabledAttributesTestCase';
+import EmailDisabledAttributesTestCase from './EmailDisabledAttributesTestCase';
+
+const React = window.React;
+
+function EmailInputs() {
+  return (
+    <FixtureSet title="Email inputs">
+      <TestCase
+        title="Spaces in email inputs"
+        description={`
+          Some browsers are trying to remove spaces from email inputs and after
+          doing this place cursor to the beginning.
+        `}
+        affectedBrowsers="Chrome">
+        <TestCase.Steps>
+          <li>Type space and character</li>
+          <li>Type character, space, character, delete last character</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>Cursor not moving.</TestCase.ExpectedResult>
+
+        <JumpingCursorTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Attributes enabled"
+        description={`
+          Test enabled pattern, maxlength, multiple attributes.
+        `}>
+        <TestCase.Steps>
+          <li>Type after existing text ',b@tt.com'</li>
+          <li>Try to type spaces after typed text</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Spaces not added. When cursor hovered over input, popup "Please match
+          the requested format." is showed.
+        </TestCase.ExpectedResult>
+
+        <EmailEnabledAttributesTestCase />
+      </TestCase>
+
+      <TestCase
+        title="Attributes disabled"
+        description={`
+          Test disabled maxlength, multiple attributes.
+        `}>
+        <TestCase.Steps>
+          <li>Type after existing text ',b@tt.com'</li>
+          <li>Try to type spaces after typed text</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Spaces are added freely. When cursor hovered over input, popup "A part
+          following '@' should not contain the symbol ','." is showed.
+        </TestCase.ExpectedResult>
+
+        <EmailDisabledAttributesTestCase />
+      </TestCase>
+    </FixtureSet>
+  );
+}
+
+export default EmailInputs;
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 884c2ad9dfe2f..77b908112a360 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -410,8 +410,8 @@ export function setDefaultValue(
   value: *,
 ) {
   if (
-    // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
-    type !== 'number' ||
+    // Focused number and email inputs synchronize on blur. See ChangeEventPlugin.js
+    (type !== 'number' && type !== 'email') ||
     node.ownerDocument.activeElement !== node
   ) {
     if (value == null) {
diff --git a/packages/react-dom/src/events/ChangeEventPlugin.js b/packages/react-dom/src/events/ChangeEventPlugin.js
index 18a30258132bc..d4ee86c95ea0f 100644
--- a/packages/react-dom/src/events/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/ChangeEventPlugin.js
@@ -236,13 +236,17 @@ function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
 function handleControlledInputBlur(node) {
   let state = node._wrapperState;
 
-  if (!state || !state.controlled || node.type !== 'number') {
+  if (
+    !state ||
+    !state.controlled ||
+    (node.type !== 'number' && node.type !== 'email')
+  ) {
     return;
   }
 
   if (!disableInputAttributeSyncing) {
     // If controlled, assign the value attribute to the current value on blur
-    setDefaultValue(node, 'number', node.value);
+    setDefaultValue(node, node.type, node.value);
   }
 }