From a93beb77befef329810af5068caef370f5eb0784 Mon Sep 17 00:00:00 2001
From: Mark Smith <mcs@pearlcrescent.com>
Date: Fri, 21 Oct 2022 11:19:04 -0400
Subject: [PATCH 1/3] fix: blue outline appears for a moment on buttons

Remove focus from the chat action button, emoji picker, and the
video chat button immediately after the buttons are clicked/tapped.
---
 src/components/EmojiPicker/EmojiPicker.js                     | 4 ++++
 .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js      | 3 +++
 src/pages/home/report/ReportActionCompose.js                  | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index c379d9f83c97..cd3e975b8e19 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -79,6 +79,10 @@ class EmojiPicker extends React.Component {
         this.onEmojiSelected = onEmojiSelected;
         this.emojiPopoverAnchor = emojiPopoverAnchor;
 
+        if (this.emojiPopoverAnchor) {
+            emojiPopoverAnchor.blur(); // Drop focus to avoid blue focus ring.
+        }
+
         this.measureEmojiPopoverAnchorPosition().then((emojiPopoverAnchorPosition) => {
             this.setState({isEmojiPickerVisible: true, emojiPopoverAnchorPosition});
         });
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index f605c7811759..0508749c12e8 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -106,7 +106,10 @@ class BaseVideoChatButtonAndMenu extends Component {
                 >
                     <Tooltip text={this.props.translate('videoChatButtonAndMenu.tooltip')}>
                         <Pressable
+                            ref={el => this.videoChatButton = el}
                             onPress={() => {
+                                this.videoChatButton.blur(); // Drop focus to avoid blue focus ring.
+
                                 // If this is the Concierge chat, we'll open the modal for requesting a setup call instead
                                 if (this.props.isConcierge) {
                                     Navigation.navigate(ROUTES.getRequestCallRoute(CONST.GUIDES_CALL_TASK_IDS.CONCIERGE_DM));
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 7a14fd124208..179b582246ef 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -574,8 +574,10 @@ class ReportActionCompose extends React.Component {
                                                 )}
                                                 <Tooltip text={this.props.translate('reportActionCompose.addAction')}>
                                                     <TouchableOpacity
+                                                        ref={el => this.actionButton = el}
                                                         onPress={(e) => {
                                                             e.preventDefault();
+                                                            this.actionButton.blur(); // Drop focus to avoid blue focus ring.
                                                             this.setMenuVisibility(true);
                                                         }}
                                                         style={styles.chatItemAttachButton}

From d79e643ae4ea6fb1621dfe804ac9083baf6ee116 Mon Sep 17 00:00:00 2001
From: Mark Smith <mcs@pearlcrescent.com>
Date: Wed, 26 Oct 2022 11:02:28 -0400
Subject: [PATCH 2/3] fix: blue outline appears for a moment on buttons

Also fix this problem for the FAB.
---
 src/components/FAB/FAB.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index 8cbb277659fb..5f101845ade3 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -65,9 +65,13 @@ class FAB extends PureComponent {
         return (
             <Tooltip absolute text={this.props.translate('common.new')}>
                 <AnimatedPressable
+                    ref={el => this.fabPressable = el}
                     accessibilityLabel={this.props.accessibilityLabel}
                     accessibilityRole={this.props.accessibilityRole}
-                    onPress={this.props.onPress}
+                    onPress={(e) => {
+                        this.fabPressable.blur(); // Drop focus to avoid blue focus ring.
+                        this.props.onPress(e);
+                    }}
                     style={[
                         styles.floatingActionButton,
                         StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),

From 2b7cda456b1eb02f1ba27b96ec429795d04ca0fa Mon Sep 17 00:00:00 2001
From: Mark Smith <mcs@pearlcrescent.com>
Date: Fri, 28 Oct 2022 11:00:55 -0400
Subject: [PATCH 3/3] fix: blue outline appears for a moment on buttons

Avoid inline comments.
---
 src/components/EmojiPicker/EmojiPicker.js                     | 3 ++-
 src/components/FAB/FAB.js                                     | 3 ++-
 .../VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js      | 3 ++-
 src/pages/home/report/ReportActionCompose.js                  | 4 +++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
index cd3e975b8e19..0d1524412c38 100644
--- a/src/components/EmojiPicker/EmojiPicker.js
+++ b/src/components/EmojiPicker/EmojiPicker.js
@@ -80,7 +80,8 @@ class EmojiPicker extends React.Component {
         this.emojiPopoverAnchor = emojiPopoverAnchor;
 
         if (this.emojiPopoverAnchor) {
-            emojiPopoverAnchor.blur(); // Drop focus to avoid blue focus ring.
+            // Drop focus to avoid blue focus ring.
+            emojiPopoverAnchor.blur();
         }
 
         this.measureEmojiPopoverAnchorPosition().then((emojiPopoverAnchorPosition) => {
diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index 5f101845ade3..cd5a1fa07816 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -69,7 +69,8 @@ class FAB extends PureComponent {
                     accessibilityLabel={this.props.accessibilityLabel}
                     accessibilityRole={this.props.accessibilityRole}
                     onPress={(e) => {
-                        this.fabPressable.blur(); // Drop focus to avoid blue focus ring.
+                        // Drop focus to avoid blue focus ring.
+                        this.fabPressable.blur();
                         this.props.onPress(e);
                     }}
                     style={[
diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
index 0508749c12e8..ae15b2443888 100755
--- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
+++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -108,7 +108,8 @@ class BaseVideoChatButtonAndMenu extends Component {
                         <Pressable
                             ref={el => this.videoChatButton = el}
                             onPress={() => {
-                                this.videoChatButton.blur(); // Drop focus to avoid blue focus ring.
+                                // Drop focus to avoid blue focus ring.
+                                this.videoChatButton.blur();
 
                                 // If this is the Concierge chat, we'll open the modal for requesting a setup call instead
                                 if (this.props.isConcierge) {
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 179b582246ef..8c5235fc0463 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -577,7 +577,9 @@ class ReportActionCompose extends React.Component {
                                                         ref={el => this.actionButton = el}
                                                         onPress={(e) => {
                                                             e.preventDefault();
-                                                            this.actionButton.blur(); // Drop focus to avoid blue focus ring.
+
+                                                            // Drop focus to avoid blue focus ring.
+                                                            this.actionButton.blur();
                                                             this.setMenuVisibility(true);
                                                         }}
                                                         style={styles.chatItemAttachButton}
