[HOLD for regression test] [$1000] Tooltip not shown for emoji picker button on hover the outer part, it only shown for hovering the icon

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

Hover on the emojipicker button icon surrounding pressable area

Expected Result:

Tooltip should shown for entire button

Actual Result:

Tooltip only shows on hover the icon

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.37-2
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
ff5be293-b6dd-4ede-8cde-239f39379a3f.webm

Expensify/Expensify Issue URL:
Issue reported by: @Pujan92
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1670532553163569

View all open jobs on GitHub

Recording.1074.mp4

ff5be293-b6dd-4ede-8cde-239f39379a3f.webm

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e647d4e751c0a2f6
• Upwork Job ID: 1601033782775242752
• Last Price Increase: 2022-12-12

[melvin-bot]

Triggered auto assignment to @kadiealexander (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[syedsaroshfarrukhdot]

Proposal :-

We need to wrap Pressable in Tooltip instead of the icon

diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index 32af3ed59..f199850be 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -28,6 +28,7 @@ const defaultProps = {
 const EmojiPickerButton = (props) => {
     let emojiPopoverAnchor = null;
     return (
+        <Tooltip text={props.translate('reportActionCompose.emoji')}>
         <Pressable
             ref={el => emojiPopoverAnchor = el}
             style={({hovered, pressed}) => ([
@@ -39,14 +40,15 @@ const EmojiPickerButton = (props) => {
             nativeID={props.nativeID}
         >
             {({hovered, pressed}) => (
-                <Tooltip text={props.translate('reportActionCompose.emoji')}>
+               
                     <Icon
                         src={Expensicons.Emoji}
                         fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
                     />
-                </Tooltip>
+               
             )}
         </Pressable>
+        </Tooltip>
     );
 };

After Fix :-

Screen.Recording.2022-12-09.at.5.36.35.AM.mov

[kadiealexander]

From this SO: https://stackoverflow.com/c/expensify/questions/14418

• The "bug" is actually a bug: Yes
• The bug is not a duplicate report of an existing GH (close the GH and add any novel details to the original GH instead): No
• The bug is reproducible, following the reproduction steps: Yes, I was able to reproduce this in the Desktop app.
• If you’re unable to reproduce the bug, add the Needs reproduction label. Comment on the issue outlining the steps you took to try to reproduce the bug, your results and tag the issue reporter and the Applause QA member who created the issue. Ask them to clarify reproduction steps and/or to check the reproduction steps again. Close issue.: n/a
• The GH template is filled out as fully as possible -- this means the GH body and title are clear (ie. could an external contributor understand it and work on it?): Yes
• The GH was created by an Expensify employee or a QA tester: Yes
• If the bug is an OldDot issue, you should decide whether it is widespread enough to justify fixing or it is better to wait for reunification. If it’s better to wait, close the GH & provide this justification: n/a
• If there's a link to Slack, check the discussion to see if we decided not to fix it: n/a
• Decide if the GH should be resolved by an External contributor or Internal engineer, add the appropriate label: External should be fine here.

[melvin-bot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01e647d4e751c0a2f6

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

[melvin-bot]

Triggered auto assignment to @thienlnam (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.