[$500] Focus on edit when keyboard shortcut is open using CTRL+J

[kbecciv]

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

---

Version Number: 1.3.84.0
Reproducible in staging?: y
Reproducible in production?: y
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
Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697207528874409

Action Performed:

1. Open the app
2. Open any report
3. Send any message
4. Edit the message
5. Remove all text from message and press enter, it should open delete popup
6. Press CTRL+J/CMD+J and observe that keyboard shortcut is opened but we can type in edit message

Expected Result:

App should not keep focus on edit message when we open keyboard shortcut using CTRL+J

Actual Result:

App keeps focus on edit message even when we open keyboard shortcut using CTRL+J

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

windows.chrome.edit.focus.on.CTRL.J.mp4

mac.chrome.CTRL.J.edit.focus.mov

Recording.4992.mp4

MacOS: Desktop

mac.desktop.CTRL.J.edit.focus.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0141276117edef8487
• Upwork Job ID: 1713214201330978816
• Last Price Increase: 2023-10-28
• Automatic offers:
• situchan | Contributor | 27503041
• dhanashree-sawant | Reporter | 27503043

[abdel-h66]

Proposal

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

When the delete comment modal is open, opening the right-hand navigation put the focus back on the comment edit field.

What is the root cause of that problem?

When the delete modal is canceled, it will automatically call the onClose callback that does the following:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 314 in fe282b4

ReportActionContextMenu.showDeleteModal(props.reportID, props.action, false, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()));

So, in summary, the Right-hand navigation when opened it dismisses any open modals, causing the Delete modal onCancel callback to be triggered. And in our case it puts the focus back on the Text input.

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

Since I could not find a way to differentiate between the modal being closed by the user, or by Navigation, I decided to check for the active route when the action occurs.

So by checking if the active route is actual report using

    const isReportRoute = Navigation.getActiveRoute().includes(`/r/${props.reportID}`)

We can then blur the text input whenever the route is not a report.

    useEffect(() => {
        if(isReportRoute) {
            return;
        }

        textInputRef.current.blur()
    }, [isReportRoute])
    

What alternative solutions did you explore? (Optional)

I tried to update the onClose callback to this

    const handleOnDeleteModalCancel = useCallback(() => {
        if(!isReportRoute) {
            return;
        }
        InteractionManager.runAfterInteractions(() => textInputRef.current.focus());
    }, [isReportRoute])

This didn't work due to the fact that the modal is closed before the route changes. Meaning isReportRoute will always be true.

N/A

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0141276117edef8487

[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

[melvin-bot]

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

[getusha]

@abdel-h66 @ArekChr just to drop a note here, we shouldn't use InteractionManager it will cause bugs after we upgrade react-native-web to the latest version, we experienced issues like this one #24482 (comment).

[abdel-h66]

Does it mean we are dropping the InteractionManager @getusha ? That was coming from the original implem by the way.

[getusha]

@abdel-h66 we have to, most of the time its solving issues because it wraps the callback passed in setTimeout, now it uses a task queue which is not ideal to handle input focus.

[bernhardoj]

Just dropping a note. InteractionManager is used because the modal hide callback is called too early. In this issue, I'm working to fix it upstream so we don't need it anymore, but it's still a long way to go.

If we want to fix it sooner, then we can use the same fix as we did in EmojiPicker

[melvin-bot]

@anmurali, @ArekChr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@anmurali, @ArekChr Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@anmurali, @ArekChr Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[anmurali]

@ArekChr this is waiting on you to pick a proposal

[ArekChr]

I'm confirming that we don't want to use InteractionManager still waiting for more proposals.

[abdel-h66]

@ArekChr In my proposal, the InteractionManager was not an addition of mine and it’s not the root cause. The code there is to show the definition of the onClose() that's being called.

So, in summary, the Right-hand navigation when opened it dismisses any open modals, causing that onCancel callback to be triggered. In our case it puts the focus back on the Text input.

[ArekChr]

@abdel-h66 understood, thanks! Could you provide links to the files associated with the code changes mentioned in your proposal? You've included snippets of code, but it's challenging to understand the context without the file references. Thank you!

[abdel-h66]

I just updated the proposal with the line reference from the codebase.

[tsa321]

Proposal

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

Text input of edit report action menu is focused when keyboard shortcut panel is open using CTRL+J

What is the root cause of that problem?

When user delete all text inside text input of edit report action and press enter the confirm modal is shown with this function call:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 314 in 414d591

ReportActionContextMenu.showDeleteModal(props.reportID, props.action, false, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()));

the onCancel parameter is () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()) this will make text input of edit report action is focused when confirm modal is closed or canceled. When user press CTRL/CMD + j the confrim modal is closed and the text input of edit report action will be focused.

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

The code base already changed :

@situchan the Modal.willAlertModalBecomeVisible(false); already moved by other PR.
So just to summarize my current change:

in ReportActionItemMessageEdit.js:

-   ReportActionContextMenu.showDeleteModal(props.reportID, props.action, true, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()));
+   ReportActionContextMenu.showDeleteModal(props.reportID, props.action, true, deleteDraft);

remove the callback for web, but since we use the callback in native app we could add a library function something like: focusEditTextInputAfterCancelDelete with .native.ts and .index.ts and to focus the textinput in native.ts file.
Or we could use DeviceCapabilities.hasHoverSupport() check in the onCancel callback to determine whether we should focus the edittextInput or not.

---

Old Proposal, for achive:

When RHN / right panel is opened the onyx modal isVisible value will be true and we already have this useEffect based on onyx modal:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Lines 136 to 138 in 414d591

	useEffect(() => {
	InputFocus.composerFocusKeepFocusOn(textInputRef.current, isFocused, modal, onyxFocused);
	}, [isFocused, modal, onyxFocused]);

we could use this useEffect to add this lines of code:

if(modal.isVisible || modal.willAlertModalBecomeVisible) {
       textInputRef.current.blur();
}

before or after InputFocus.composerFocusKeepFocusOn.

and because of this useEffect and InputFocus.composerFocusKeepFocusOn already exist we can remove the onCancel callback of show delete modal, so we remove the InteractionManager.runAfterInteractions(() => textInputRef.current.focus()) parameter of ReportActionContextMenu.showDeleteModal, in here:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 314 in 414d591

ReportActionContextMenu.showDeleteModal(props.reportID, props.action, false, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()));

the InputFocus.composerFocusKeepFocusOn will focus the edit text input when there is a change in onyx modal.

What alternative solutions did you explore? (Optional)

@situchan I have tested it, removing the onCancel callback () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()) solve the issue,
but the edit text input won't focus if user remove all text and press enter -> confirm delete modal shown -> cancel delete.

So the real issue is to focus the edit text input after the cancel delete, right?
Basically my changes is :

add

InputFocus.inputFocusChange(false);

before the showDeleteModal:

App/src/pages/home/report/ReportActionItemMessageEdit.js

Line 314 in 414d591

ReportActionContextMenu.showDeleteModal(props.reportID, props.action, false, deleteDraft, () => InteractionManager.runAfterInteractions(() => textInputRef.current.focus()));

and move the

Modal.willAlertModalBecomeVisible(false);

of basemodal when the modal visibility is false in here:

App/src/components/Modal/BaseModal.js

Line 89 in c7a376a

Modal.willAlertModalBecomeVisible(false);

into hideModal:

App/src/components/Modal/BaseModal.js

Line 66 in c7a376a

const hideModal = useCallback(

---

explanation:

We must set the InputFocus.inputFocusChange(false); before showDeleteModal to make the function ` InputFocus.composerFocusKeepFocusOn() to function properly after delete modal disappears.

But because we set the Modal.willAlertModalBecomeVisible(false); too early before modal completely disappear, the trap focus of the react native modal will catch the focus event caused by composerFocusKeepFocusOn and the focus handler of the react native modal will focus element inside modal, so the text input that has been focused by composerFocusKeepFocusOn will blur again. Here is the event listener that catch the focus event:

https://github.com/necolas/react-native-web/blob/a3ea2a0a4fd346a1b32e6cef527878c8e433eef8/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js#L137
`
So we need to move the Modal.willAlertModalBecomeVisible(false); in hideModal / when the modal completely disappears.

Result:

macos-web_d.mp4

[melvin-bot]

This issue has not been updated in over 14 days. @anmurali, @zanyrenney, @hayata-suenaga, @situchan, @tsa321 eroding to Weekly issue.

[hayata-suenaga]

waiting for payment

[zanyrenney]

Didn't realise if this was waiting on me or @anmurali

[zanyrenney]

@tsa321 is the non-agency contributor who authored the PR and @situchan is the C+ who reviewed the PR.

[zanyrenney]

payment summary
paid $500 @situchan

[zanyrenney]

@tsa321 is not hired on the upwork job, can they link their upwork profile please? I can't find them and this job is now closed so we will need to issue a payment separately.

[zanyrenney]

I've done one of the payments, just waiting on @tsa321 ^

[dhanashree-sawant]

Hi @zanyrenney, whenever you are available, can you check if this issue is eligible for reporting bonus?

[zanyrenney]

no reporting bonus.

[zanyrenney]

@tsa321 I asked you to apply for the job - please apply on the job posting on upwork.

[anmurali]

Since this is chat focussed bug, I am putting this in #vip-vsb.

[tsa321]

cc @zanyrenney

[hayata-suenaga]

Zany has been OOO. She will come back online this week. Please wait a little bit for that 🙇 @tsa321

[zanyrenney]

Hi @tsa321 I have just sent you a manual offer for the job, please accept.

[zanyrenney]

@hayata-suenaga thanks for the message above, appreciate it! <3

[zanyrenney]

not overdue!

[tsa321]

Thank you @zanyrenney , I have accepted the offer

[hayata-suenaga]

waiting for payment

[zanyrenney]

payment summary

• paid $500 to @tsa321