[$250] IOS - Hold request - Keyboard overlaps education modal after putting expense on hold

izarutskaya commented 2 weeks ago

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

Version Number: 1.4.85-5 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4645099 Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team

Action Performed:

Precondition: user is a member of a workspace

Open the app and log in as a member of a workspace
Navigate to the workspace chat
Submit 2 expenses
Open one of the expenses > 3 dots 5.Select Hold and enter the comment

Expected Result:

The education modal is displayed and fully visible

Actual Result:

Keyboard comes out and overlaps the education modal.

Workaround:

Unknown

Platforms:

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

[ ] Android: Native
[ ] Android: mWeb Chrome
[x] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/115492554/0b420f64-6771-4373-a65f-0eed213dde8f

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~018f5e0c27cb4a2e57
Upwork Job ID: 1805194799193979622
Last Price Increase: 2024-07-01

Issue Owner

Current Issue Owner: @Julesssss

melvin-bot[bot] commented 2 weeks ago

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

izarutskaya commented 2 weeks ago

We think this issue might be related to the #collect project.

melvin-bot[bot] commented 2 weeks ago

Job added to Upwork: https://www.upwork.com/jobs/~018f5e0c27cb4a2e57

melvin-bot[bot] commented 2 weeks ago

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

Sparth19 commented 1 week ago

Proposal

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

On iOS, when the hold expense is triggered, the keyboard overlaps the educational modal, causing the modal to be hidden behind the keyboard.

What is the root cause of that problem?

Upon pressing the hold button, the user is navigated to the hold reason page. After submitting the hold reason, the system returns to the Report Screen, automatically focusing on the composer input field to open the keyboard.

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

The keyboard can be dismissed when the educational modal is opened here.

https://github.com/Expensify/App/blob/621e8fc63f78858ac15b8c2c1fda0516f49cf27d/src/components/MoneyRequestHeader.tsx#L180-L185

to

useEffect(() => {
        if (isLoadingHoldUseExplained) {
            return;
        }
        setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation);
        Keyboard.dismiss();
    }, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);

Result

https://github.com/Expensify/App/assets/30714258/dab54555-eb16-461e-8f5c-4ef36ab97663

What alternative solutions did you explore? (Optional)

melvin-bot[bot] commented 1 week ago

@parasharrajat, @bfitzexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

parasharrajat commented 1 week ago

@Sparth19 Thanks for the proposal. Did you check whether we already have such functionality on the Popover Component? There are two props avoidKeyboard and shouldSetModalVisibility. Does any of those help in any way.

Sparth19 commented 1 week ago

@parasharrajat Thanks for your suggestions. I have reviewed the functionality of the Popover Component and its relevant props.

avoidKeyboard prop is designed to move the modal up when the keyboard is opened to ensure that the modal content remains visible.
However, using avoidKeyboard results in the modal being repositioned in a way that can disrupt the user experience. It can make the modal appear to jump or move unexpectedly, which is not ideal for smooth interaction.
We have already implemented shouldSetModalVisibility in our modal, but it did not resolve the issue.

melvin-bot[bot] commented 1 week ago

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

parasharrajat commented 6 days ago

Ok, Thanks for checking those. In this case, @Sparth19's proposal looks good to me.

:ribbon: :eyes: :ribbon: C+ reviewed

melvin-bot[bot] commented 6 days ago

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot[bot] commented 6 days ago

📣 @Sparth19 You have been assigned to this job! Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs! Keep in mind: Code of Conduct | Contributing 📖

Sparth19 commented 6 days ago

I applied for the job on Upwork. The PR will be ready by tomorrow. Thanks!

Sparth19 commented 5 days ago

@Julesssss PR is ready for review. Thanks!

Expensify / App