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.

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

Focus compose box when LHN report clicked #2032

Merged
merged 1 commit into from
Mar 24, 2021

Conversation

Beamanator
Copy link
Contributor

@Beamanator Beamanator commented Mar 24, 2021

<If necessary, assign reviewers that know the area or changes well. Feel free to tag any additional reviewers you see fit.>

Details

When a user clicks on a chat from the LHN, the ReportView component updates, showing the latest conversation. At this point, we want the compose box at the bottom to be focused so that users can quickly and efficiently start typing a new message.

This change will make the compose box (ReportActionCompose) automatically get focused whenever the reportID prop changes, which happens whenever a user clicks on a different chat / report - not just via the LHN.

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/158106

Tests

  1. View any chat
  2. Open a new chat by clicking it on the LHN
  3. See the compose box automatically get focused

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Screen.Recording.2021-03-24.at.5.14.17.PM.mov

Web

See above

Mobile Web

Not needed

Desktop

See above

iOS

Not needed

Android

Not needed

@Beamanator Beamanator requested a review from a team as a code owner March 24, 2021 15:17
@Beamanator Beamanator self-assigned this Mar 24, 2021
@botify botify requested review from sketchydroide and removed request for a team March 24, 2021 15:18
@Beamanator Beamanator requested a review from a team March 24, 2021 15:52
@botify botify requested review from johnmlee101 and removed request for a team March 24, 2021 15:52
@Beamanator Beamanator removed the request for review from johnmlee101 March 24, 2021 15:53
@Beamanator
Copy link
Contributor Author

Sorry @johnmlee101 - unassigning b/c i accidentally requested pullerbear twice 😅

// When any modal goes from visible to hidden, bring focus to the compose field
if (prevProps.modal.isVisible && !this.props.modal.isVisible) {
// When any modal goes from visible to hidden or when the report ID changes, bring focus to the compose field
if (
Copy link
Contributor

@sketchydroide sketchydroide Mar 24, 2021

Choose a reason for hiding this comment

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

I don't think we separate lines for ifs something like this is closer to our guidelines I believe

if ((prevProps.modal.isVisible && !this.props.modal.isVisible)
    || (prevProps.reportID !== this.props.reportID)) {

Would be otherwise happy :)

Copy link
Contributor

Choose a reason for hiding this comment

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

never mind that, clearly I have not worked on the this repo for a while 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was wondering what y'all like to do in these situations! haha

I got this style from: https://github.com/airbnb/javascript#control-statements

Here, they reference this example:

// good
if (
  (foo === 123 || bar === 'abc')
  && doesItLookGoodWhenItBecomesThatLong()
  && isThisReallyHappening()
) {
  thing1();
}

Anyway, let me know what you think! I'm happy to modify :D

Copy link
Contributor

Choose a reason for hiding this comment

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

yeah, you are tottally right, sorry for that, I haven't open this repo in a while, this does seem like the way we do it in this project, keeping consitency is important, lets continue to do that

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok great, thanks for asking anyway!

Copy link
Contributor

@sketchydroide sketchydroide left a comment

Choose a reason for hiding this comment

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

small comment

Copy link
Contributor

@sketchydroide sketchydroide left a comment

Choose a reason for hiding this comment

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

LGTM

@sketchydroide sketchydroide merged commit 739d9ae into master Mar 24, 2021
@sketchydroide sketchydroide deleted the beaman-focusComposeWhenLHNReportClick branch March 24, 2021 18:37
@isagoico
Copy link

isagoico commented Mar 26, 2021

This issue was only reproducible in iOS Safari. Android mWeb is working as expected.

Title:
[Chat] mWeb/iOS Safari - 1.0.5.30 - Chat - Key pad does not open in iOS Safari after tapping on conversation

Expected Result:
The box is highlighted blue and key pad does open

Actual Result:
Key pad does not open

Action Performed:

  1. Go to https://staging.expensify.cash
  2. Log in with any user
  3. Open a new chat by clicking it on the LHN
  4. See the compose box automatically get focused

Build version : 1.0.5.30

Is it reproducible in production? : Yes

Device and OS: iPhone 8/iOS 14.2 / Safari browser

Attachment
Video

@isagoico isagoico added the DeployBlockerCash This issue or pull request should block deployment label Mar 26, 2021
@roryabraham
Copy link
Contributor

Hi @isagoico, since this issue is reproducible in production, I think it should not be a DeployBlockerCash. Removing that label now and checking it off on the deploy checklist. When you have a moment, can you please create a new issue for the bug you reported in the comment above?

@isagoico
Copy link

All done! New issue can be found here #2108

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants