Web - Can send messages by clicking around the send button, outside the composer, and when the cursor is an arrow

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Login, open any chat and type any message.
2. Go and click around the send button, ( and not the send button itself ), inside or outside the composer, when the cursor is still arrow

Expected Result:

Users shouldn’t be able to send messages when clicking around the send button (inside or outside the composer), and when the cursor is arrow.
He should be able to do that by clicking only on the button itself

Actual Result:

User can send messages by clicking around the send button ( inside or outside the composer ). and when the cursor is arrow

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.47-3
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screencast.from.28-07-23.17_25_18.webm

Recording.3995.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Ahmed-Abdella
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690567101181809

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kbecciv]

Proposal by: @Ahmed-Abdella
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690567101181809

Proposal

Please re-state the problem that we are trying to solve in this issue.

Can send messages by clicking around the send button, inside or outside the composer, and while the cursor is Arrow. While the user should be able to send messages by clicking the send button itself.

What is the root cause of that problem?

2 reasons cause that and they are related to the style of the Button Wrapper here

https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose.js#L1235C1-L1250C1

1. This button wrapper is square and it is the area that does sending actions by clicking on it, so it should be round to match the button itself and the right round side of the composer.
2. After making it around we now face another issue, it is the margin: 3 we added to the button
   here
   https://github.com/Expensify/App/blob/main/src/styles/styles.js#L1669C1-L1677C7
   which makes the button inside the wrapper (clickable area) by 3px of margin.
   Those reasons lead to spaces (inside and outside the composer) where I can click to send messages, while they are not part of the button and the cursor is an arrow.

What changes do you think we should make in order to solve the problem?

1. To fix the first issue we should just make the wrapper round by adding this prop

wrapperStyle={{borderRadius: 99}}

or

wrapperStyle={{borderRadius: "50%"}}

to this
(https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose.js#L1235C1-L1250C1)
now the wrapper is round and matches the button (no clickable spaces around the corners)

2. To fix the second issue we should remove the margin: 3 property from styles.chatItemSubmitButton here
   https://github.com/Expensify/App/blob/main/src/styles/styles.js#L1669C1-L1677C7
   And add the margin for the whole wrapper beside the borderRadius we added before

wrapperStyle={{borderRadius: 99, margin:"3px"}}

by doing that we add the margin between the whole wrapper and the composer edges
NOTE:
Removing the margin: 3 property from styles.chatItemSubmitButton
affect two other elements inside
https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionItemMessageEdit.js
the cancel button here
https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionItemMessageEdit.js#L279C21-L297C49
and the message edit button here
https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionItemMessageEdit.js#L358C29-L372C53
so we should add this prop

wrapperStyle={{ margin:"3px"}}

to those components to keep everything consistent.

What alternative solutions did you explore? (Optional)

N/A

[rushatgabhane]

not a bug imo. it's intended otherwise the pressable area would be too small

[melvin-bot]

Current assignee @adelekennedy is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Ahmed-Abdella]

@rushatgabhane No it is not, as it is working just fine in production new dot

[kbecciv]

@rushatgabhane It could be related to this KI #23848.

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @AndrewGable (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Beamanator]

I don't think this is big enough of a bug to make a deploy blocker, but should still be fixed

[Ahmed-Abdella]

Here are the screenshots that expalin my proposal above (it is all in the slack conversation)

[adelekennedy]

Agree this might be a dupe of #23848 @AndrewGable or @rushatgabhane can I get gut check on that? In which case we should close this one as the other issues was reported first

[Ahmed-Abdella]

@adelekennedy I reported my issue on Slack first, while the other issue was reported here first. It's possible that they are two distinct issues. However, what matters most is that the problem was resolved, regardless of whether you addressed mine or the other one first. Thanks.

[adelekennedy]

It looks like that other issue was reported later but made it into Slack earlier, I'll pay you the reporting bonus @Ahmed-Abdella in case we decide to close

[Ahmed-Abdella]

@adelekennedy Thanks, I appreciate your concern.

[adelekennedy]

I'm making the call that this is a dupe - going to close this and pay you out @Ahmed-Abdella

[adelekennedy]

@Ahmed-Abdella please apply here!

[Ahmed-Abdella]

@adelekennedy Applied, Thanks

[adelekennedy]

hired!

[Ahmed-Abdella]

@adelekennedy I accepted the offer