Set the focus on Edit Box after edit action. #3441

parasharrajat · 2021-06-08T17:42:46Z

Details

Remove modal visibility status from the Context Menu. which is needed to make the edited comment as a prime actor for focus.
Delayed the edit action after the Context menu is completely hidden which let us handle the focus. It removes the need for the SetTimeout hack.
Set the focus on the Edit box after each edit action.
Move the focus back to the main Composer when the Edit box is closed.

Fixed Issues

Fixes #3017
fixes #3309

Tests | QA Steps (Web|Desktop)

Sign in to the e.chat staging web app
Right-click the text and choose Edit Comment
Textbox should automatically get focused.
Click Edit comment from Hover menu. Edit box should automatically get focused.
Send a message, then hit the ArrowUp key. Edit box of your latest message should automatically get focused.
Hit the Esc key, and the main ReportActionCompose should regain focus.

Tests | QA Steps(mWeb|Android|IOS)

Sign in to the e.chat staging web app
Hold press any text message sent by you and choose Edit Comment
Textbox should automatically get focused.

Tests | QA Steps (Web|Desktop) for #3309

Sign in to the e.chat staging web app
Right-click the text and choose Edit Comment
Textbox should automatically get focused.
Click Edit comment from Hover menu. Edit box should automatically get focused.
Save changes , main chat composer should regain focus.
cancel Edit, main chat composer should regain focus.
Click edit comment for any message.
Hit the Esc key, and the main chat composer should regain focus.

Tested On

Screenshots

Web

focus-edit-w.mp4

Mobile Web

1623176819336.mp4

Desktop

focus-edit-d.mp4

iOS

Android

1623177379471.mp4

parasharrajat · 2021-06-09T14:50:10Z

Ready to roll. Thanks.

roryabraham · 2021-06-09T16:14:18Z

@parasharrajat Looks like lint is failing

parasharrajat · 2021-06-09T16:20:45Z

@roryabraham this is due to #3401. And the fix is being made here #3481. So I suggest we merge it quickly.

roryabraham · 2021-06-09T17:41:04Z

Lint error resolved, please merge main into this branch

roryabraham · 2021-06-09T17:43:24Z

Also @parasharrajat will this also fix this deploy blocker?

roryabraham · 2021-06-09T17:59:15Z

Also @parasharrajat will this also fix this deploy blocker?

Confirmed on iOS safari that it does.

roryabraham

Also, I must be going crazy because I can't find where the isFocused prop of the ReportActionCompose comes from, because it isn't coming from here. Are we sure that this is ever being actually set? Can we safely get rid of it? We also have isFocused in the ReportActionCompose state.

src/components/Modal/ModalPropTypes.js

src/libs/ReportActionComposeFocusManager.js

src/pages/home/report/ReportActionContextMenu.js

src/pages/home/report/ReportActionItem.js

parasharrajat · 2021-06-09T18:20:52Z

IsFocused prop is coming from withNavigation HOC. It's the most important prop. Removing it is not an option. 😄

parasharrajat · 2021-06-09T18:30:19Z

That deploy blocker is due to app crashes. It's not covered in it. Actually, I don't know the reason for the crash so far, thus It's hard to tell.

parasharrajat · 2021-06-09T18:30:57Z

Updated. Thanks.

parasharrajat · 2021-06-10T16:41:23Z

@deetergp @roryabraham Awaiting your feedback. Thanks.

deetergp · 2021-06-10T17:26:03Z

Testing

Web

Editing via the context menu always puts focus to the edit text box, but the right-click > edit only does it on the first edit after a page load. In subsequent right-click > edits, the focus stays at the bottom, in the main text editor.

Desktop

Context menu Edit works like it should, but I couldn't get right-click > edit to focus in the edit text box, it always went down to the main text box.

mWeb

Works as intended 👍

iOS

Works as intended, though it's weird that you only get the long-press context menu if you click on your own avatar. That's probably unrelated.

parasharrajat · 2021-06-10T18:18:59Z

@deetergp Thanks for letting me know. I changed the prop name but forgot to update it in the Component. shouldSetModalVisibility was the prop. Just fixed it. You can check now. Thanks.

deetergp · 2021-06-10T18:39:29Z

That fix did it, thanks @parasharrajat 👍

deetergp

Code looks good and tests pass.

parasharrajat · 2021-06-10T19:42:06Z

parasharrajat · 2021-06-11T16:42:56Z

@roryabraham Any feedback here? I think this PR is waiting to be merged by you. 😅

roryabraham

This looks good to me. Sorry to have been a bottleneck here @parasharrajat – been a crazy couple days.

OSBotify · 2021-06-11T22:11:40Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-06-15T17:14:43Z

🚀 Deployed to staging in version: 1.0.68-5🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

kavimuru · 2021-06-15T22:38:45Z

iPhone - Safari - Cursor focus not gained for edit comment field

Expected Result:

Textbox should automatically get focused.

Actual Result:

Focus not gained in edit box

Actions Performed:

Launch the URL and login
Hold press any text message sent by you and choose Edit Comment

Platform:

iOS
mWeb ✔️
Android

Build:

1.0.69-0

Notes/Images/Video:

Bug5114863_RPReplay_Final1623793918.mp4

parasharrajat · 2021-06-15T23:01:34Z

No worries I will test it on safari M-web

roryabraham · 2021-06-17T16:45:57Z

I am unable to reproduce on iOS 14.5 Safari. @isagoico @kavimuru can we please retest this in the latest staging version and see if it has been resolved?

parasharrajat · 2021-06-17T17:00:02Z

Same here issue is not reproducible on M-web safari iPhone 12 - 14.4.

isagoico · 2021-06-18T13:37:55Z

Retested and it was a pass in mWeb! Checking it off.

OSBotify · 2021-06-25T18:32:57Z

🚀 Deployed to production in version: 1.0.73-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

parasharrajat added 3 commits June 8, 2021 20:43

set the focus on the Edit ox on edit action

8737fb4

pull latest changes

b607356

fix: callback needs to reset for each action

0a62b81

parasharrajat marked this pull request as ready for review June 8, 2021 18:28

parasharrajat requested a review from a team as a code owner June 8, 2021 18:28

MelvinBot requested review from AndrewGable and removed request for a team June 8, 2021 18:28

parasharrajat changed the title ~~Set the focus on Edit Box after edit action.~~ [WIP] Set the focus on Edit Box after edit action. Jun 8, 2021

AndrewGable requested review from deetergp and removed request for AndrewGable June 8, 2021 21:44

parasharrajat added 3 commits June 9, 2021 19:08

Merge branch 'main' of github.com:Expensify/Expensify.cash into edit-box

1910616

added a new composer focus strategy

f60fdf9

fix: bug transItionEnd does not fire on IOS

713dfb0

parasharrajat changed the title ~~[WIP] Set the focus on Edit Box after edit action.~~ Set the focus on Edit Box after edit action. Jun 9, 2021

parasharrajat mentioned this pull request Jun 9, 2021

[IS-3218] Fixed cursor issue on edit comment box #3434

Merged

5 tasks

roryabraham assigned parasharrajat Jun 9, 2021

roryabraham requested changes Jun 9, 2021

View reviewed changes

parasharrajat added 3 commits June 9, 2021 23:51

Merge branch 'main' of github.com:Expensify/Expensify.cash into edit-box

fecc303

tweaks

43bf806

typo

fda1967

parasharrajat requested a review from roryabraham June 9, 2021 18:38

isagoico mentioned this pull request Jun 9, 2021

Deploy Checklist: Expensify.cash 2021-06-08 #3450

Closed

49 tasks

fix: prop name

65662dd

deetergp approved these changes Jun 10, 2021

View reviewed changes

roryabraham approved these changes Jun 11, 2021

View reviewed changes

roryabraham merged commit 34612d7 into Expensify:main Jun 11, 2021

OSBotify mentioned this pull request Jun 15, 2021

Deploy Checklist: Expensify.cash 2021-06-15 #3593

Closed

isagoico added the DeployBlockerCash This issue or pull request should block deployment label Jun 15, 2021

isagoico removed the DeployBlockerCash This issue or pull request should block deployment label Jun 18, 2021

NikkiWines mentioned this pull request Oct 12, 2021

[$1000] Android - Keyboard is not automatically displayed when editing a comment #5637

Closed

parasharrajat deleted the edit-box branch November 4, 2022 19:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Set the focus on Edit Box after edit action. #3441

Set the focus on Edit Box after edit action. #3441

parasharrajat commented Jun 8, 2021 •

edited

Loading

parasharrajat commented Jun 9, 2021

roryabraham commented Jun 9, 2021

parasharrajat commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham left a comment

parasharrajat commented Jun 9, 2021

parasharrajat commented Jun 9, 2021 •

edited

Loading

parasharrajat commented Jun 9, 2021

parasharrajat commented Jun 10, 2021

deetergp commented Jun 10, 2021

parasharrajat commented Jun 10, 2021

deetergp commented Jun 10, 2021

deetergp left a comment

parasharrajat commented Jun 10, 2021

parasharrajat commented Jun 11, 2021

roryabraham left a comment

OSBotify commented Jun 11, 2021

OSBotify commented Jun 15, 2021

kavimuru commented Jun 15, 2021

parasharrajat commented Jun 15, 2021

roryabraham commented Jun 17, 2021

parasharrajat commented Jun 17, 2021

isagoico commented Jun 18, 2021

OSBotify commented Jun 25, 2021

Set the focus on Edit Box after edit action. #3441

Set the focus on Edit Box after edit action. #3441

Conversation

parasharrajat commented Jun 8, 2021 • edited Loading

Details

Fixed Issues

Tests | QA Steps (Web|Desktop)

Tests | QA Steps(mWeb|Android|IOS)

Tests | QA Steps (Web|Desktop) for #3309

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

parasharrajat commented Jun 9, 2021

roryabraham commented Jun 9, 2021

parasharrajat commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham commented Jun 9, 2021

roryabraham left a comment

Choose a reason for hiding this comment

parasharrajat commented Jun 9, 2021

parasharrajat commented Jun 9, 2021 • edited Loading

parasharrajat commented Jun 9, 2021

parasharrajat commented Jun 10, 2021

deetergp commented Jun 10, 2021

Testing

Web

Desktop

mWeb

iOS

parasharrajat commented Jun 10, 2021

deetergp commented Jun 10, 2021

deetergp left a comment

Choose a reason for hiding this comment

parasharrajat commented Jun 10, 2021

parasharrajat commented Jun 11, 2021

roryabraham left a comment

Choose a reason for hiding this comment

OSBotify commented Jun 11, 2021

OSBotify commented Jun 15, 2021

kavimuru commented Jun 15, 2021

iPhone - Safari - Cursor focus not gained for edit comment field

Expected Result:

Actual Result:

Actions Performed:

Platform:

Build:

Notes/Images/Video:

parasharrajat commented Jun 15, 2021

roryabraham commented Jun 17, 2021

parasharrajat commented Jun 17, 2021

isagoico commented Jun 18, 2021

OSBotify commented Jun 25, 2021

parasharrajat commented Jun 8, 2021 •

edited

Loading

parasharrajat commented Jun 9, 2021 •

edited

Loading