From b5394e41db66b1b8c6759825f51c2e469d694c43 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 11 Jan 2021 07:03:12 -0500
Subject: [PATCH 1/3] FocalPointPicker: Fix renderign and dragging experience

This update improves the FocalPointPicker component to ensure that the focal point UI is visible during dragging.
The solution involved removing (an old) `.is-dragging` class that was attached to the focal point UI.
At some point, `.is-dragging` (globally) was forced to be `display: none !important`.

Also, `InputControl` drag update stability has been improved by removing the `pointer-event: none` disabling during drag.
---
 .../src/focal-point-picker/focal-point.js      | 18 ++++++++----------
 packages/components/src/input-control/utils.js |  4 ++--
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/focal-point-picker/focal-point.js b/packages/components/src/focal-point-picker/focal-point.js
index 119ca25f61258a..75bc53a7306e4d 100644
--- a/packages/components/src/focal-point-picker/focal-point.js
+++ b/packages/components/src/focal-point-picker/focal-point.js
@@ -1,26 +1,24 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * Internal dependencies
  */
 import {
-	PointerIconSVG,
+	FocalPointWrapper,
 	PointerIconPathFill,
 	PointerIconPathOutline,
-	FocalPointWrapper,
+	PointerIconSVG,
 } from './styles/focal-point-style';
 
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 export default function FocalPoint( {
 	coordinates = { left: '50%', top: '50%' },
-	isDragging = false,
 	...props
 } ) {
 	const classes = classnames(
-		'components-focal-point-picker__icon_container',
-		isDragging && 'is-dragging'
+		'components-focal-point-picker__icon_container'
 	);
 
 	const style = {
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index cb1049f56f0600..c6b59114ac03f0 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -41,10 +41,10 @@ export function useDragCursor( isDragging, dragDirection ) {
 	useEffect( () => {
 		if ( isDragging ) {
 			document.documentElement.style.cursor = dragCursor;
-			document.documentElement.style.pointerEvents = 'none';
+			document.documentElement.style.userSelect = 'none';
 		} else {
 			document.documentElement.style.cursor = null;
-			document.documentElement.style.pointerEvents = null;
+			document.documentElement.style.userSelect = null;
 		}
 	}, [ isDragging ] );
 

From b87b3cc9cff834b444a779029c763001ef18d649 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 11 Jan 2021 08:26:26 -0500
Subject: [PATCH 2/3] Fix focal point bound values for Safari

---
 packages/components/src/focal-point-picker/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 0452d43451d1ea..9927734679b1e0 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -52,6 +52,14 @@ export class FocalPointPicker extends Component {
 	componentDidMount() {
 		document.addEventListener( 'mouseup', this.handleOnMouseUp );
 		window.addEventListener( 'resize', this.updateBounds );
+
+		/*
+		 * Set initial bound values.
+		 *
+		 * This is necessary for Safari:
+		 * https://github.com/WordPress/gutenberg/issues/25814
+		 */
+		this.updateBounds();
 	}
 	componentDidUpdate( prevProps ) {
 		if ( prevProps.url !== this.props.url ) {
@@ -59,7 +67,7 @@ export class FocalPointPicker extends Component {
 				isDragging: false,
 			} );
 		}
-		/**
+		/*
 		 * Handles cases where the incoming value changes.
 		 * An example is the values resetting based on an UNDO action.
 		 */

From da88bf3f36635ac83f6d61e3d7263b28d3813135 Mon Sep 17 00:00:00 2001
From: Jon Q <hello@jonquach.com>
Date: Mon, 11 Jan 2021 08:38:36 -0500
Subject: [PATCH 3/3] Improve text selection when dragging

---
 packages/components/src/focal-point-picker/index.js | 3 +++
 packages/components/src/input-control/utils.js      | 2 --
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/focal-point-picker/index.js b/packages/components/src/focal-point-picker/index.js
index 9927734679b1e0..6213e79dd19456 100644
--- a/packages/components/src/focal-point-picker/index.js
+++ b/packages/components/src/focal-point-picker/index.js
@@ -181,6 +181,9 @@ export class FocalPointPicker extends Component {
 
 		if ( ! isDragging ) return;
 
+		// Prevents text-selection when dragging.
+		event.preventDefault();
+
 		const { shiftKey } = event;
 		const pickerDimensions = this.pickerDimensions();
 		const cursorPosition = {
diff --git a/packages/components/src/input-control/utils.js b/packages/components/src/input-control/utils.js
index c6b59114ac03f0..bc40ef2f13f958 100644
--- a/packages/components/src/input-control/utils.js
+++ b/packages/components/src/input-control/utils.js
@@ -41,10 +41,8 @@ export function useDragCursor( isDragging, dragDirection ) {
 	useEffect( () => {
 		if ( isDragging ) {
 			document.documentElement.style.cursor = dragCursor;
-			document.documentElement.style.userSelect = 'none';
 		} else {
 			document.documentElement.style.cursor = null;
-			document.documentElement.style.userSelect = null;
 		}
 	}, [ isDragging ] );