diff --git a/src/components/EmojiPicker/EmojiPicker.js b/src/components/EmojiPicker/EmojiPicker.js index c379d9f83c97..0d1524412c38 100644 --- 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 index bce7d8b70dc5..cad001e75cd6 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -73,9 +73,14 @@ class FloatingActionButton extends PureComponent { return ( 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 index f605c7811759..ae15b2443888 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -106,7 +106,11 @@ class BaseVideoChatButtonAndMenu extends Component { > 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 index ab5aa6fba104..a09d30c19144 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -578,8 +578,12 @@ class ReportActionCompose extends React.Component { )} this.actionButton = el} onPress={(e) => { e.preventDefault(); + + // Drop focus to avoid blue focus ring. + this.actionButton.blur(); this.setMenuVisibility(true); }} style={styles.chatItemAttachButton}