From 1bb122c151b4e0a3a15343f82972a1654e630dc8 Mon Sep 17 00:00:00 2001
From: Miguel Fonseca <miguelcsf@gmail.com>
Date: Fri, 6 May 2022 16:46:01 +0100
Subject: [PATCH] DOM: Allow copying text from non-text input elements (#40192)

* DOM: Fix inputFieldHasUncollapsedSelection for non-text inputs

The selection state of non-text input elements (e.g. `number`, but even
`email`) is opaque to Gutenberg, per the HTML spec [1]. Unaware of this
nuance, `inputFieldHasUncollapsedSelection` would incorrectly report
that some non-text input element had no text selected when in fact it
did. This caused the block editor to take over `copy` events to copy
whole blocks, preventing the user from copying what they had actually
selected inside the input element in question.

The workaround in this commit is to always assume that there could be an
uncollapsed selection in an active element if that element's selection
state is opaque.

[1]: https://html.spec.whatwg.org/multipage/input.html#do-not-apply

* Add input type 'time' to isTextField's blacklist

* Unit tests: update expectations for isTextField()

* inputFieldHasUncollapsedSelection: Rewrite comments, default to true

* documentHasSelection: Accept any input types

... as oppposed to just text inputs (isTextField) and number inputs
(isNumberInput).
---
 packages/dom/README.md                        | 12 ++---
 .../dom/src/dom/document-has-selection.js     | 10 ++---
 .../dom/document-has-uncollapsed-selection.js |  8 ++--
 .../input-field-has-uncollapsed-selection.js  | 44 +++++++++++--------
 packages/dom/src/dom/is-html-input-element.js |  2 +-
 packages/dom/src/dom/is-text-field.js         |  2 +
 packages/dom/src/test/dom.js                  | 10 ++---
 7 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/packages/dom/README.md b/packages/dom/README.md
index 41af65673bff0..d6ee8c5ee6125 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -28,8 +28,8 @@ _Returns_
 
 ### documentHasSelection
 
-Check whether the current document has a selection. This checks for both
-focus in an input field and general text selection.
+Check whether the current document has a selection. This includes focus in
+input fields, textareas, and general rich-text selection.
 
 _Parameters_
 
@@ -57,9 +57,9 @@ _Returns_
 
 ### documentHasUncollapsedSelection
 
-Check whether the current document has any sort of selection. This includes
-ranges of text across elements and any selection inside `<input>` and
-`<textarea>` elements.
+Check whether the current document has any sort of (uncollapsed) selection.
+This includes ranges of text across elements and any selection inside
+textual `<input>` and `<textarea>` elements.
 
 _Parameters_
 
@@ -67,7 +67,7 @@ _Parameters_
 
 _Returns_
 
--   `boolean`: Whether there is any sort of "selection" in the document.
+-   `boolean`: Whether there is any recognizable text selection in the document.
 
 ### focus
 
diff --git a/packages/dom/src/dom/document-has-selection.js b/packages/dom/src/dom/document-has-selection.js
index a023f45c0d9a9..bd8090dad909e 100644
--- a/packages/dom/src/dom/document-has-selection.js
+++ b/packages/dom/src/dom/document-has-selection.js
@@ -2,12 +2,12 @@
  * Internal dependencies
  */
 import isTextField from './is-text-field';
-import isNumberInput from './is-number-input';
+import isHTMLInputElement from './is-html-input-element';
 import documentHasTextSelection from './document-has-text-selection';
 
 /**
- * Check whether the current document has a selection. This checks for both
- * focus in an input field and general text selection.
+ * Check whether the current document has a selection. This includes focus in
+ * input fields, textareas, and general rich-text selection.
  *
  * @param {Document} doc The document to check.
  *
@@ -16,8 +16,8 @@ import documentHasTextSelection from './document-has-text-selection';
 export default function documentHasSelection( doc ) {
 	return (
 		!! doc.activeElement &&
-		( isTextField( doc.activeElement ) ||
-			isNumberInput( doc.activeElement ) ||
+		( isHTMLInputElement( doc.activeElement ) ||
+			isTextField( doc.activeElement ) ||
 			documentHasTextSelection( doc ) )
 	);
 }
diff --git a/packages/dom/src/dom/document-has-uncollapsed-selection.js b/packages/dom/src/dom/document-has-uncollapsed-selection.js
index 551c8dde6f092..40ff38c270f50 100644
--- a/packages/dom/src/dom/document-has-uncollapsed-selection.js
+++ b/packages/dom/src/dom/document-has-uncollapsed-selection.js
@@ -5,13 +5,13 @@ import documentHasTextSelection from './document-has-text-selection';
 import inputFieldHasUncollapsedSelection from './input-field-has-uncollapsed-selection';
 
 /**
- * Check whether the current document has any sort of selection. This includes
- * ranges of text across elements and any selection inside `<input>` and
- * `<textarea>` elements.
+ * Check whether the current document has any sort of (uncollapsed) selection.
+ * This includes ranges of text across elements and any selection inside
+ * textual `<input>` and `<textarea>` elements.
  *
  * @param {Document} doc The document to check.
  *
- * @return {boolean} Whether there is any sort of "selection" in the document.
+ * @return {boolean} Whether there is any recognizable text selection in the document.
  */
 export default function documentHasUncollapsedSelection( doc ) {
 	return (
diff --git a/packages/dom/src/dom/input-field-has-uncollapsed-selection.js b/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
index ad974c8ce4298..25fcea683ef04 100644
--- a/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
+++ b/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
@@ -2,41 +2,49 @@
  * Internal dependencies
  */
 import isTextField from './is-text-field';
-import isNumberInput from './is-number-input';
+import isHTMLInputElement from './is-html-input-element';
 
 /**
- * Check whether the given element, assumed an input field or textarea,
- * contains a (uncollapsed) selection of text.
+ * Check whether the given input field or textarea contains a (uncollapsed)
+ * selection of text.
  *
- * Note: this is perhaps an abuse of the term "selection", since these elements
- * manage selection differently and aren't covered by Selection#collapsed.
+ * CAVEAT: Only specific text-based HTML inputs support the selection APIs
+ * needed to determine whether they have a collapsed or uncollapsed selection.
+ * This function defaults to returning `true` when the selection cannot be
+ * inspected, such as with `<input type="time">`. The rationale is that this
+ * should cause the block editor to defer to the browser's native selection
+ * handling (e.g. copying and pasting), thereby reducing friction for the user.
  *
- * See: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection#Related_objects.
+ * See: https://html.spec.whatwg.org/multipage/input.html#do-not-apply
  *
  * @param {Element} element The HTML element.
  *
  * @return {boolean} Whether the input/textareaa element has some "selection".
  */
 export default function inputFieldHasUncollapsedSelection( element ) {
-	if ( ! isTextField( element ) && ! isNumberInput( element ) ) {
+	if ( ! isHTMLInputElement( element ) && ! isTextField( element ) ) {
 		return false;
 	}
+
+	// Safari throws a type error when trying to get `selectionStart` and
+	// `selectionEnd` on non-text <input> elements, so a try/catch construct is
+	// necessary.
 	try {
 		const {
 			selectionStart,
 			selectionEnd,
 		} = /** @type {HTMLInputElement | HTMLTextAreaElement} */ ( element );
-
-		return selectionStart !== null && selectionStart !== selectionEnd;
+		return (
+			// `null` means the input type doesn't implement selection, thus we
+			// cannot determine whether the selection is collapsed, so we
+			// default to true.
+			selectionStart === null ||
+			// when not null, compare the two points
+			selectionStart !== selectionEnd
+		);
 	} 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;
+		// This is Safari's way of saying that the input type doesn't implement
+		// selection, so we default to true.
+		return true;
 	}
 }
diff --git a/packages/dom/src/dom/is-html-input-element.js b/packages/dom/src/dom/is-html-input-element.js
index 3d52ad1bc7729..8db1e8020940e 100644
--- a/packages/dom/src/dom/is-html-input-element.js
+++ b/packages/dom/src/dom/is-html-input-element.js
@@ -5,5 +5,5 @@
  */
 export default function isHTMLInputElement( node ) {
 	/* eslint-enable jsdoc/valid-types */
-	return !! node && node.nodeName === 'INPUT';
+	return node?.nodeName === 'INPUT';
 }
diff --git a/packages/dom/src/dom/is-text-field.js b/packages/dom/src/dom/is-text-field.js
index 62c36590ac9d7..261345f7d471b 100644
--- a/packages/dom/src/dom/is-text-field.js
+++ b/packages/dom/src/dom/is-text-field.js
@@ -26,6 +26,8 @@ export default function isTextField( node ) {
 		'reset',
 		'submit',
 		'number',
+		'email',
+		'time',
 	];
 	return (
 		( isHTMLInputElement( node ) &&
diff --git a/packages/dom/src/test/dom.js b/packages/dom/src/test/dom.js
index 4e3f645591fb4..2e310e5e323f6 100644
--- a/packages/dom/src/test/dom.js
+++ b/packages/dom/src/test/dom.js
@@ -125,6 +125,8 @@ describe( 'DOM', () => {
 			'range',
 			'reset',
 			'submit',
+			'email',
+			'time',
 		];
 
 		/**
@@ -132,13 +134,7 @@ describe( 'DOM', () => {
 		 *
 		 * @type {string[]}
 		 */
-		const TEXT_INPUT_TYPES = [
-			'text',
-			'password',
-			'search',
-			'url',
-			'email',
-		];
+		const TEXT_INPUT_TYPES = [ 'text', 'password', 'search', 'url' ];
 
 		it( 'should return false for non-text input elements', () => {
 			NON_TEXT_INPUT_TYPES.forEach( ( type ) => {