From bf6c60be12b4de30738d1d0bf80043cfd261ebd5 Mon Sep 17 00:00:00 2001
From: Nickolas Kenyeres <nickolas@knicklabs.com>
Date: Fri, 8 Jan 2021 16:45:54 -0500
Subject: [PATCH] Fix: EditableFields retain focus on enter/escape keypress
 events (Safari ONLY) (#900)

* Prevent field focusing on double-focus event from Safari

* Fix issue where you could not tab between fields
---
 .../EditableField/EditableField.jsx           | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/EditableField/EditableField.jsx b/src/components/EditableField/EditableField.jsx
index c7e569661..70685c812 100644
--- a/src/components/EditableField/EditableField.jsx
+++ b/src/components/EditableField/EditableField.jsx
@@ -174,6 +174,30 @@ export class EditableField extends React.Component {
     const { onInputFocus } = this.props
     const { fieldValue } = this.state
 
+    // There is a bug in Safari as of version 14.0.1 where a second focus event
+    // is being received on inputs. The bug is not fixed in the technology
+    // preview of 14.1.0 either. It would appear that Safari has had an on-again
+    // off-again issue with focus events.
+    // See: https://github.com/facebook/react/issues/10871
+    // See: https://bugs.webkit.org/show_bug.cgi?id=179990
+
+    // In the case where this happens, the second focus event will have a
+    // secondary target. If we have an EditableField, the secondary target
+    // will be the field mask. If we have an EditableFieldComposite, the
+    // secondary target will be the composed mask. Otherwise the secondary
+    // target will be null or another element in the case of tab navigation.
+    const isSafari =
+      navigator.userAgent.indexOf('Safari') !== -1 &&
+      navigator.userAgent.indexOf('Chrome') === -1
+    const maskIsSecondaryTarget =
+      !!event.relatedTarget &&
+      (event.relatedTarget.classList.contains('FieldMask__value') ||
+        event.relatedTarget.classList.contains('ComposedMask'))
+    if (isSafari && maskIsSecondaryTarget) {
+      event.target.blur()
+      return
+    }
+
     this.setState(
       {
         activeField: name,