Add fix to make inputs of type email return true from isTextField (#2…

…1162) * Add fix to make inputs of type email return true from isTextField to allow native paste to handle pasting in email inputs Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Ella van Durpe <[email protected]>
WordPress · Jul 13, 2020 · 5fe0cfb · 5fe0cfb
1 parent 3c93dec
commit 5fe0cfb
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -448,25 +448,24 @@ export function placeCaretAtVerticalEdge(
  * @return {boolean} True if the element is an text field, false if not.
  */
 export function isTextField( element ) {
-	try {
-		const { nodeName, selectionStart, contentEditable } = element;
-
-		return (
-			( nodeName === 'INPUT' && selectionStart !== null ) ||
-			nodeName === 'TEXTAREA' ||
-			contentEditable === 'true'
-		);
-	} catch ( error ) {
-		// Safari throws an exception when trying to get `selectionStart`
-		// on non-text <input> elements (which, understandably, don't
-		// have the text selection API). We catch this via a try/catch
-		// block, as opposed to a more explicit check of the element's
-		// input types, because of Safari's non-standard behavior. This
-		// also means we don't have to worry about the list of input
-		// types that support `selectionStart` changing as the HTML spec
-		// evolves over time.
-		return false;
-	}
+	const { nodeName, contentEditable } = element;
+	const nonTextInputs = [
+		'button',
+		'checkbox',
+		'hidden',
+		'file',
+		'radio',
+		'image',
+		'range',
+		'reset',
+		'submit',
+		'number',
+	];
+	return (
+		( nodeName === 'INPUT' && ! nonTextInputs.includes( element.type ) ) ||
+		nodeName === 'TEXTAREA' ||
+		contentEditable === 'true'
+	);
 }
 
 /**

diff --git a/packages/dom/src/test/dom.js b/packages/dom/src/test/dom.js
@@ -107,9 +107,12 @@ describe( 'DOM', () => {
 		const NON_TEXT_INPUT_TYPES = [
 			'button',
 			'checkbox',
-			'image',
 			'hidden',
+			'file',
 			'radio',
+			'image',
+			'range',
+			'reset',
 			'submit',
 		];
 
@@ -118,7 +121,13 @@ describe( 'DOM', () => {
 		 *
 		 * @type {string[]}
 		 */
-		const TEXT_INPUT_TYPES = [ 'text', 'password', 'search', 'url' ];
+		const TEXT_INPUT_TYPES = [
+			'text',
+			'password',
+			'search',
+			'url',
+			'email',
+		];
 
 		it( 'should return false for non-text input elements', () => {
 			NON_TEXT_INPUT_TYPES.forEach( ( type ) => {