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 the compose field after closing modals #1699

Merged
merged 3 commits into from
Mar 12, 2021

Conversation

tgolen
Copy link
Contributor

@tgolen tgolen commented Mar 10, 2021

Details

I added a global state for tracking if modals are open or closed, then connected that state to the compose field so it gets focus when modals are closed.

Fixed Issues

Fixes https://github.com//issues/1513 Fixes https://github.com/Expensify/Expensify/issues/154180

Tests

  1. Go to a chat and start typing a comment
  2. Open up the LHN search
  3. Close the search modal (or select any chat)
  4. Verify that the compose field gets focus

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS (n/a because the field does not get focus by design)
  • Android (n/a because the field does not get focus by design)

Screenshots

Web

Not really any screenshots necessary

Mobile Web

Not really any screenshots necessary

Desktop

Not really any screenshots necessary

iOS

Not really any screenshots necessary

Android

Not really any screenshots necessary

@tgolen tgolen requested a review from a team March 10, 2021 16:46
@tgolen tgolen self-assigned this Mar 10, 2021
@botify botify requested review from Gonals and removed request for a team March 10, 2021 16:46
@@ -62,6 +70,11 @@ class ReportActionCompose extends React.Component {
if (this.props.comment && prevProps.comment === '' && prevProps.comment !== this.props.comment) {
this.comment = this.props.comment;
}

// When any modal goes from visible to hidden, bring focus to the compose field
if (prevProps.modal.isVisible === true && this.props.modal.isVisible === false) {
Copy link
Contributor

Choose a reason for hiding this comment

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

NAB. We can just do if (prevProps.modal.isVisible && !this.props.modal.isVisible) here, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated!

Copy link
Contributor

@Gonals Gonals left a comment

Choose a reason for hiding this comment

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

One minor comment. Looks good otherwise!

@tgolen tgolen requested a review from a team as a code owner March 11, 2021 15:55
@botify botify requested review from sketchydroide and removed request for a team March 11, 2021 15:55
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.

Code Looks good

@sketchydroide sketchydroide merged commit 8ff3ef9 into master Mar 12, 2021
@sketchydroide sketchydroide deleted the tgolen-focus-compose branch March 12, 2021 19:10
@github-actions github-actions bot locked and limited conversation to collaborators Mar 12, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants