From a93beb77befef329810af5068caef370f5eb0784 Mon Sep 17 00:00:00 2001 From: Mark Smith 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 { > 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 { )} 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 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 ( 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 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 { 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}