[Hold for payment] [$500] DEV: Web - Input focus is not working properly while coming from directly from WS

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. go to any chat
2. send some messages
3. observe focus is working fine
4. no go to any workspace(create if not have -(Profile setting->workspace))
5. then select three dots which is top most right
6. go to #announce
7. write some text
8. observe the focus

Expected Result:

Focus is should work properly.

Actual Result:

Focus is not working properly.

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: Dev 1.3.61.0
Reproducible in staging?: no
Reproducible in production?: n/a
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

Screen.Recording.2023-09-01.at.10.25.11.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @niravkakadiya25
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693198540165839

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010c732ec5612bddc7
• Upwork Job ID: 1699143706130157568
• Last Price Increase: 2023-09-05
• Automatic offers:
• niravkakadiya25 | Reporter | 26624150

[melvin-bot]

Triggered auto assignment to @slafortune (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

[melvin-bot]

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

[slafortune]

applying the external label

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~010c732ec5612bddc7

[melvin-bot]

Current assignee @slafortune is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[DylanDylann]

Proposal

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

• Input focus is not working properly while coming from directly from WS

What is the root cause of that problem?

• Currently, When opening RHN modal, it will set the isVisible in ONYXKEYS.MODAL to true. Then clicking on the "Go to #announce room" button, will navigate to the chat report screen but does not set the isVisible to false
• The isVisible used to check if we should run the function focus like bellow:
  

  App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

  Lines 421 to 434 in 1bdc5ac

  	useEffect(() => {
  	if (modal.isVisible && !prevIsModalVisible) {
  	// eslint-disable-next-line no-param-reassign
  	isNextModalWillOpenRef.current = false;
  	}
  	// We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
  	// We avoid doing this on native platforms since the software keyboard popping
  	// open creates a jarring and broken UX.
  	if (!(willBlurTextInputOnTapOutside && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
  	return;
  	}
  	focus();
  	}, [focus, prevIsFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);

• Because the isVisible is always false, the focus is not run in this case

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

• When clicking on "Go to #announce room" button or other similar buttons, we should set the isVisible to false using the setModalVisibility function like below:

  const goToRoom = useCallback(
        (type) => {
            setModalVisibility(false);
            const room = _.find(props.reports, (report) => report && report.policyID === policy.id && report.chatType === type && !ReportUtils.isThread(report));
            Navigation.navigate(ROUTES.getReportRoute(room.reportID));
        },
        [props.reports, policy],
    );

What alternative solutions did you explore? (Optional)

• Also we can add the listener to the modalScreenListeners that whenever the RHN modal is blurred, the Modal.setModalVisibility(false); is called like below:

const modalScreenListeners = {
    focus: () => {
        Modal.setModalVisibility(true);
    },
    beforeRemove: () => {
        Modal.setModalVisibility(false);
    },
    blur: () => {
        Modal.setModalVisibility(false);
    },
};

Result

Screencast.from.06-09-2023.13.01.43.webm

[slafortune]

@sobitneupane what do you think of the proposal presented by @DylanDylann ?

Assigning a new BZ member, I am out on sabbatical.

[melvin-bot]

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

[DylanDylann]

@slafortune Just updated Proposal #26470 (comment) - What alternative solutions did you explore? (Optional) section. Please help check. Thanks

[sobitneupane]

Thanks for the proposal @DylanDylann

Proposal from @DylanDylann looks good to me.

🎀 👀 🎀 C+ reviewed

[DylanDylann]

@sobitneupane PR #27219 is ready for review

[melvin-bot]

This issue has not been updated in over 15 days. @Beamanator, @sakluger, @sobitneupane, @DylanDylann eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[Beamanator]

@sakluger I believe we determined this has already been solved without a PR here. Can we still compensate @DylanDylann and @sobitneupane for their time & effort?

[DylanDylann]

@sakluger Could you help to check this comment?

[sakluger]

Sorry, yes. I think in this case, since the PR was fully written and approved, we can payout the full $500.

I've sent offers to @DylanDylann and @sobitneupane, please let me know once you've accepted. Thanks!

[DylanDylann]

@sakluger Thanks, accepted

[sobitneupane]

@sakluger Accepted the offer.

I typically receive payments through newDot. If it is possible to retrieve the upwork offer, I will request payment through newDot. However, I am fine either way.

[DylanDylann]

@sakluger Could you help to move forward this issue?

[DylanDylann]

@sakluger Would you mind moving forward with the payment here?
Thanks 🙏

[sakluger]

Sorry for the long wait everyone, I usually rely on issues getting the "Hold for payment" added to the title and then moved back to daily when it's ready for payment - I should have made those changes when I sent the offer.

[sakluger]

I've paid out @DylanDylann via Upwork. @sobitneupane I canceled your Upwork contract so you can request through NewDot (summary below). Please comment when it's okay for me to close the issue.

Summarizing payouts for this issue:

Contributor: @DylanDylann $500 (paid via Upwork)
Contributor+: @sobitneupane $500 (payable via Manual Request)

[sobitneupane]

#26470 (comment)

Requested payment on newDot.

[JmillsExpensify]

$500 payment approved for @sobitneupane based on summary above.

[melvin-bot]

@Beamanator, @sakluger, @sobitneupane, @DylanDylann Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Beamanator]

I guess we can close this now, right?

[sakluger]

Yep! Thanks everyone.

[niravkakadiya25]

Hello @sakluger @Beamanator
I have not received my reporting bonus in upwork. Can you please check on this?