Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix app refocuses on compose box even when RHN is open if we right click on emoji reaction and click on user #22107

Merged
merged 2 commits into from
Jul 4, 2023
Merged

Fix app refocuses on compose box even when RHN is open if we right click on emoji reaction and click on user #22107

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d0b98f
Allow text input blur when right click on emoji reaction
hoangzinh Jul 3, 2023
fba2e7e
Update comment
hoangzinh Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/components/Reactions/EmojiReactionBubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,15 @@ function EmojiReactionBubble(props) {
onSecondaryInteraction={props.onReactionListOpen}
ref={props.forwardedRef}
enableLongPressWithHover={props.isSmallScreenWidth}
// Prevent text input blur when emoji reaction is clicked
onMouseDown={(e) => e.preventDefault()}
onMouseDown={(e) => {
// Allow text input blur when emoji reaction is right clicked
if (e && e.button === 2) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoangzinh NAB: Can you point me to the documentation of e.button property? My understanding was that we'd be using e.nativeEvent.which prop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, e.which is deprecated. So I use e.button which is also popular used https://caniuse.com/mdn-api_mouseevent_buttons. I also recorded in both Chrome and Safari and attach in the PR description

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent. Thank you!

return;
}

// Prevent text input blur when emoji reaction is left clicked
e.preventDefault();
}}
accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
accessibilityLabel={props.emojiCodes.join('')}
>
Expand Down
Loading