Merge pull request #12090 from MarkCSmith/issue11433-blue-outline

Expensify · Nov 15, 2022 · 210903a · 210903a
2 parents 585a9fc + b798307
commit 210903a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js
@@ -79,6 +79,11 @@ class EmojiPicker extends React.Component {
         this.onEmojiSelected = onEmojiSelected;
         this.emojiPopoverAnchor = emojiPopoverAnchor;
 
+        if (this.emojiPopoverAnchor) {
+            // Drop focus to avoid blue focus ring.
+            emojiPopoverAnchor.blur();
+        }
+
         this.measureEmojiPopoverAnchorPosition().then((emojiPopoverAnchorPosition) => {
             this.setState({isEmojiPickerVisible: true, emojiPopoverAnchorPosition});
         });

diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js
@@ -73,9 +73,14 @@ class FloatingActionButton 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) => {
+                        // Drop focus to avoid blue focus ring.
+                        this.fabPressable.blur();
+                        this.props.onPress(e);
+                    }}
                     style={[
                         styles.floatingActionButton,
                         StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),

diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js
@@ -106,7 +106,11 @@ class BaseVideoChatButtonAndMenu extends Component {
                 >
                     <Tooltip text={this.props.translate('videoChatButtonAndMenu.tooltip')}>
                         <Pressable
+                            ref={el => this.videoChatButton = el}
                             onPress={() => {
+                                // 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) {
                                     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
@@ -578,8 +578,12 @@ class ReportActionCompose extends React.Component {
                                                 )}
                                                 <Tooltip text={this.props.translate('reportActionCompose.addAction')}>
                                                     <TouchableOpacity
+                                                        ref={el => this.actionButton = el}
                                                         onPress={(e) => {
                                                             e.preventDefault();
+
+                                                            // Drop focus to avoid blue focus ring.
+                                                            this.actionButton.blur();
                                                             this.setMenuVisibility(true);
                                                         }}
                                                         style={styles.chatItemAttachButton}