[$500] [HOLD for payment 2023-09-06] Dev - Unable to select a state

[kavimuru]

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. Open App ->Settings -> Workspace -> bank Account
2. Enter the required details and proceed to step 2.
3. Attempt to select your state.

Expected Result:

The user is able to select a state.

Actual Result:

The user cannot select a state.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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:
Reproducible in staging?: dev
Reproducible in production?: dev
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-08-26.at.7.07.10.PM.mov

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017b84ce7e9fc17d03
• Upwork Job ID: 1701792992094031872
• Last Price Increase: 2023-09-13

[melvin-bot]

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

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Pujan92]

Proposal

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

On typing any char for statepicker the modal gets hide

What is the root cause of that problem?

Seems regression from #25672 where we migrate the BaseModal class component to the function component. Currently, it is doing the cleanup on the dependency changes which should occur on unmounting.

App/src/components/Modal/BaseModal.js

Lines 84 to 94 in c169952

	return () => {
	// Only trigger onClose and setModalVisibility if the modal is unmounting while visible.
	if (isVisible) {
	hideModal(true);
	Modal.willAlertModalBecomeVisible(false);
	}
	// To prevent closing any modal already unmounted when this modal still remains as visible state
	Modal.setCloseModal(null);
	};
	}, [hideModal, isVisible, onClose]);

https://github.com/Expensify/App/pull/25672/files#diff-a766f362da94923822313f0249c8cfaedf93151a08220f529255c40fc67bbf55L54-L63

Reason: Whenever user types in the state textinput, StatePicker will gets rerender and it creates new ref to the hidePickerModal as we haven't used useCallback for it. With this, useEffect dep change triggers and it will call the clean up function which will hide the modal.

Same can be reproducible for CountryPicker in Profile -> Home Address.

App/src/components/StatePicker/index.js

Line 52 in c169952

const hidePickerModal = () => {

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

I think we need to add a new useEffect without any dependency and move this clean up there which acts like a componentWillUnmount.

App/src/components/Modal/BaseModal.js

Line 95 in c169952

     useEffect(() => {
        return () => {
            // Only trigger onClose and setModalVisibility if the modal is unmounting while visible.
            if (isVisible) {
                hideModal(true);
                Modal.willAlertModalBecomeVisible(false);
            }

            // To prevent closing any modal already unmounted when this modal still remains as visible state
            Modal.setCloseModal(null);
        };
    }, []);

• Considering the other issue https://expensify.slack.com/archives/C049HHMV9SM/p1693115903343099 or similar issues where subsequent modal isn't opening, we need to add dependency onModalHide here as the function needs to update the ref when onModalHide updates, otherwise it calls the old onModalHide function and create issues. Bcoz for ThreeDotsMenu and FloatingActionButtonAndPopover we don't use shouldSetModalVisibility which won't recreate the func hideModal in BaseModal component.

App/src/components/Modal/BaseModal.js

Lines 67 to 75 in c029dc5

	onModalHide();
	}
	Modal.onModalDidClose();
	if (!fullscreen) {
	ComposerFocusManager.setReadyToFocus();
	}
	},
	// eslint-disable-next-line react-hooks/exhaustive-deps -- adding onModalHide to the dependency array causes too many unnecessary rerenders
	[shouldSetModalVisibility],

[shouldSetModalVisibility, onModalHide]

Result

Screen.Recording.2023-08-27.at.01.27.50.mov