[Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening #53692

IuliiaHerets · 2024-12-06T10:32:42Z

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: V9. 0.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team

Action Performed:

Launch app in both mweb and app
Open settings -- profile--status
Note save button can be be seen when status message is empty
Enter a status message and save
Open the status option again

Expected Result:

With status message entered, save button must not be hidden behind keypad on opening status page.

Actual Result:

With status message entered, save button hidden behind keypad on opening status page.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6686106_1733471673686.Screenrecorder-2024-12-06-13-15-46-740_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021866149099136907717
Upwork Job ID: 1866149099136907717
Last Price Increase: 2025-02-03
Automatic offers:

allgandalf | Reviewer | 105979836
huult | Contributor | 105979837

Issue Owner

Current Issue Owner: @lschurr

melvin-bot · 2024-12-06T10:32:51Z

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

melvin-bot · 2024-12-09T15:53:13Z

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

melvin-bot · 2024-12-09T15:53:17Z

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

M00rish · 2024-12-10T17:56:49Z

Edited by proposal-police: This proposal was edited at 2023-10-07T06:34:00Z.

Proposal

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

Status - With status message entered, save button hidden behind keypad on opening.

What is the root cause of that problem?

the issue happens when the clear status element is added after we type something in, that element takes space and so the save button will be pushed down for lack of space.

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

check if clear status element should be present:

const shouldShowClearStatus = !!currentUserEmojiCode || !!currentUserStatusText

and only if shouldShowClearStatus is true scroll down:

 useEffect(() => {
        if (!shouldShowClearStatus) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            requestAnimationFrame(() => {
                formRef.current?.scrollToEnd({animated: true});
            });
        });
    }, [shouldShowClearStatus]);

and obviously, we use the shouldShowClearStatus instead in the component:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 213 to 222 in 64d6c38

    
           {(!!currentUserEmojiCode || !!currentUserStatusText) && ( 
        
               <MenuItem 
        
                   title={translate('statusPage.clearStatus')} 
        
                   titleStyle={styles.ml0} 
        
                   icon={Expensicons.Trashcan} 
        
                   onPress={clearStatus} 
        
                   iconFill={theme.danger} 
        
                   wrapperStyle={[styles.pl2]} 
        
               /> 
        
           )}

{ shouldShowClearStatus  && (
                        <MenuItem
                            title={translate('statusPage.clearStatus')}
                            titleStyle={styles.ml0}
                            icon={Expensicons.Trashcan}
                            onPress={clearStatus}
                            iconFill={theme.danger}
                            wrapperStyle={[styles.pl2]}
                        />
                  )}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

UI issue

What alternative solutions did you explore? (Optional)

huult · 2024-12-11T16:00:33Z

Edited by proposal-police: This proposal was edited at 2024-12-16 15:04:30 UTC.

Proposal

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

With status message entered, save button hidden behind keypad on opening

What is the root cause of that problem?

The RCA of this issue is that the available height is not sufficient to display all elements when the keyboard opens. As a result, the keyboard overlaps the button, and scrolling is required to access it.
This issue commonly occurs on smaller devices like the iPhone SE...

Screen.Recording.2024-12-11.at.21.49.24.mov

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

To resolve this issue, we should scroll the form to the end when the keyboard opens to prevent the keyboard from overlapping the button, ensuring the button is visible as expected. To implement this, follow the steps below:

FormWrapper receives a new prop shouldScrollToEnd and sets up useEffect to trigger scrolling.

App/src/components/Form/FormWrapper.tsx

Line 41 in 25127ff

function FormWrapper({

  function FormWrapper({
      onSubmit,
      children,
      errors,
      inputRefs,
      submitButtonText,
      footerContent,
      isSubmitButtonVisible = true,
      style,
      submitButtonStyles,
      submitFlexEnabled = true,
      enabledWhenOffline,
      isSubmitActionDangerous = false,
      formID,
      shouldUseScrollView = true,
      scrollContextEnabled = false,
      shouldHideFixErrorsAlert = false,
      disablePressOnEnter = false,
      isSubmitDisabled = false,
      shouldScrollToEnd = false,
  }: FormWrapperProps) {

   useEffect(() => {
        if (!shouldScrollToEnd) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            requestAnimationFrame(() => {
                formRef.current?.scrollToEnd({animated: true});
            });
        });
    }, [shouldScrollToEnd]);

Enable the new prop shouldScrollToEnd to trigger scrolling to the end when visiting the status page

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 166 in 1a0b9a1

<FormProvider

const {keyboardHeight} = useKeyboardState();

   <FormProvider
      formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
      style={[styles.flexGrow1, styles.flex1]}
      ref={formRef}
      submitButtonText={translate('statusPage.save')}
      submitButtonStyles={[styles.mh5, styles.flexGrow1]}
      onSubmit={updateStatus}
      validate={validateForm}
      enabledWhenOffline
      shouldScrollToEnd
      // shouldScrollToEnd={keyboardHeight !== 0}
  >

we need shouldEnableMaxHeight in ScreenWrapper.

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 158 in 77c56cd

<ScreenWrapper

POC

Screen.Recording.2024-12-11.at.22.57.34.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is a UI bug; I don’t think we need to test it

What alternative solutions did you explore? (Optional)

When the text input is focused, we scroll it to the top to maximize the visibility of the elements below.

Expose scrollTo for FormProvider

App/src/components/Form/FormProvider.tsx

Lines 265 to 267 in bfe4e35

    
           const scrollTo = (e: number) => { 
        
               formRef.current?.scrollTo(e); 
        
           };

App/src/components/Form/FormWrapper.tsx

Lines 106 to 119 in bfe4e35

    
           useImperativeHandle(forwardedRef, () => ({ 
        
               scrollTo: (e) => { 
        
                   InteractionManager.runAfterInteractions(() => { 
        
                       requestAnimationFrame(() => { 
        
                           setTimeout(() => { 
        
                               formRef.current?.scrollTo({ 
        
                                   y: e, 
        
                                   animated: false, 
        
                               }); 
        
                           }, 500); 
        
                       }); 
        
                   }); 
        
               }, 
        
           }));

When the TextInput is focused, meaning the keyboard is open, we scroll the TextInput to the top to maximize the visibility of the elements below it (68 is height of label)

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 210 to 214 in bfe4e35

    
           onFocus={() => { 
        
               inputRef.current.measure((fx, fy, width, height, px, py) => { 
        
                   formRef.current?.scrollTo(py - 68); 
        
               }); 
        
           }}

POC

Screen.Recording.2024-12-16.at.23.28.44.mov

Test branch

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

allgandalf · 2024-12-12T09:27:04Z

@huult @M00rish can you guys explain why this only happens on the status page, seems odd to me that it is not reproducible on other pages, makes me think if there is a implementation problem with that specific page

M00rish · 2024-12-12T09:30:17Z

@allgandalf here is pervious similar issue #50073

huult · 2024-12-12T09:34:47Z

@allgandalf Because the height of the page is not enough to contain all the elements, they are covered when the scroll appears.

allgandalf · 2024-12-16T10:26:40Z

@huult sorry i don't think introducing a new prop is what we want for this issue, so we shouldn't move with that approach, is there any alternative solution you have thought about?

@M00rish have you tested your solution ? It didn't work for me, can you share a result video if your suggestions fix this issue ?

melvin-bot · 2024-12-16T16:00:12Z

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

M00rish · 2024-12-16T16:07:54Z

I thought it's like the other issue but it's not actually, I have updated my proposal @allgandalf.

huult · 2024-12-16T16:30:52Z

Proposal updated

Update test branch
Add alternative solutions

@allgandalf Could you check again?

allgandalf · 2024-12-17T07:06:45Z

@huult my main concern with the issue is that we shouldn't apply patches here (meaning workarounds) because this is a page specific issue and not component specific.

If there is no clean solution, we can surely consider your proposal, I'll ask on open source channel for more ideas, please consider other ideas too, thanks :)

update:

Posted for new proposals here

mkzie2 · 2024-12-17T08:08:59Z

Proposal

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

With status message entered, save button hidden behind keypad on opening status page.

What is the root cause of that problem?

The form's scroll view contains all elements including the submit button. When the keyboard is opened if the content doesn't have enough height to display, the submit button is overlapped with the keyboard and we need to scroll to see the full submit button.

App/src/components/Form/FormWrapper.tsx

Lines 171 to 180 in d86024e

    
                   <ScrollView 
        
                       style={[styles.w100, styles.flex1]} 
        
                       contentContainerStyle={styles.flexGrow1} 
        
                       keyboardShouldPersistTaps="handled" 
        
                       ref={formRef} 
        
                   > 
        
                       {scrollViewContent()} 
        
                   </ScrollView> 
        
               ); 
        
           }

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

We should move the submit button to the outside to make sure it always displays at the bottom and behind the keyboard

App/src/components/Form/FormWrapper.tsx

Lines 171 to 180 in d86024e

    
                   <ScrollView 
        
                       style={[styles.w100, styles.flex1]} 
        
                       contentContainerStyle={styles.flexGrow1} 
        
                       keyboardShouldPersistTaps="handled" 
        
                       ref={formRef} 
        
                   > 
        
                       {scrollViewContent()} 
        
                   </ScrollView> 
        
               ); 
        
           }

Remove the FormAlertWithSubmitButton from scrollViewContent here and remove the padding-bottom style here, we will move this to FormAlertWithSubmitButton

App/src/components/Form/FormWrapper.tsx

Line 101 in d86024e

const scrollViewContent = useCallback(

Create a const for FormAlertWithSubmitButton, we need to change some styles in containerStyles props. styles.flexGrow0 to ensure it's always displayed at the bottom, styles.mh5 to add the margin horizontal and padding-bottom is moved from here

const formAlertWithSubmitButton = (
    <FormAlertWithSubmitButton
        buttonText={submitButtonText}
        isDisabled={isSubmitDisabled}
        isAlertVisible={((!isEmptyObject(errors) || !isEmptyObject(formState?.errorFields)) && !shouldHideFixErrorsAlert) || !!errorMessage}
        isLoading={!!formState?.isLoading}
        message={isEmptyObject(formState?.errorFields) ? errorMessage : undefined}
        onSubmit={onSubmit}
        footerContent={footerContent}
        onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
        containerStyles={[styles.mh5, styles.mt5, submitButtonStyles, styles.flexGrow0, {paddingBottom: safeAreaInsetPaddingBottom + styles.pb5.paddingBottom}]}
        enabledWhenOffline={enabledWhenOffline}
        isSubmitActionDangerous={isSubmitActionDangerous}
        disablePressOnEnter={disablePressOnEnter}
        enterKeyEventListenerPriority={1}
    />
);

We will add formAlertWithSubmitButton outside the scroll view wrapper

return (
    <>
        {scrollContextEnabled ? (
            <ScrollViewWithContext
                style={[styles.w100, styles.flex1]}
                contentContainerStyle={styles.flexGrow1}
                keyboardShouldPersistTaps="handled"
                ref={formRef}
            >
                {scrollViewContent()}
            </ScrollViewWithContext>
        ) : (
            <ScrollView
                style={[styles.w100, styles.flex1]}
                contentContainerStyle={styles.flexGrow1}
                keyboardShouldPersistTaps="handled"
                ref={formRef}
            >
                {scrollViewContent()}
            </ScrollView>
        )}
        {isSubmitButtonVisible && formAlertWithSubmitButton}
    </>
);

App/src/components/Form/FormWrapper.tsx

Line 161 in d86024e

return scrollContextEnabled ? (

Note: This is a big change in global form component, we need to test carefully in the PR phrase to make sure the UI is good for all forms.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA (it's a UI issue)

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Result

Screen.Recording.2024-12-17.at.15.07.25.mov

mkzie2 · 2024-12-17T08:39:34Z

@allgandalf What do you think about my proposal?

M00rish · 2024-12-17T08:49:36Z

I hope you can review my updated one too thanks.

huult · 2024-12-17T08:51:58Z

If there is no clean solution, we can surely consider your proposal

@allgandalf I hope you consider this option because my proposal reduces regression testing and involves only minimal changes.

melvin-bot · 2024-12-20T09:03:13Z

@lschurr @allgandalf this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

allgandalf · 2025-01-29T07:55:11Z

Had problem setting up small screen for android, hopeful to get it fixed today and continue with reviewing

allgandalf · 2025-02-03T07:05:42Z

I like the approach from @huult here, RCA is correct and solution seems more feasible.

@mkzie2 , I tried applying your solution but it is way too complex and affects the app entirely also i don't like the idea of moving the button out of scrollview, so yeah lets go with @huult proposal here

🎀👀🎀 C+ reviewed

melvin-bot · 2025-02-03T07:05:52Z

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

melvin-bot · 2025-02-03T16:00:31Z

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

pecanoro · 2025-02-03T22:10:34Z

Assigning @huult to the issue

melvin-bot · 2025-02-03T22:10:47Z

📣 @allgandalf 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2025-02-03T22:10:50Z

📣 @huult 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

huult · 2025-02-04T06:21:01Z

Thank you all! I will create the pull request within 24 hours.

huult · 2025-02-17T12:39:18Z

@allgandalf could you check the pull request?

melvin-bot · 2025-03-04T21:55:47Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2025-03-04T21:55:52Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.8-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix save button hidden by keypad #56629

If no regressions arise, payment will be issued on 2025-03-11. 🎊

For reference, here are some details about the assignees on this issue:

@huult requires payment automatic offer (Contributor)
@allgandalf requires payment automatic offer (Reviewer)

melvin-bot · 2025-03-04T21:55:54Z

@allgandalf @lschurr @allgandalf The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

lschurr · 2025-03-10T16:27:08Z

@allgandalf could you work on the checklist for this one?

allgandalf · 2025-03-10T17:22:44Z

sure, will complete tomorrow, please put this back to daily

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Dec 6, 2024

melvin-bot bot assigned lschurr Dec 6, 2024

melvin-bot bot added the Overdue label Dec 9, 2024

lschurr added the External Added to denote the issue can be worked on by a contributor label Dec 9, 2024

melvin-bot bot changed the title ~~Status - With status message entered, save button hidden behind keypad on opening~~ [$250] Status - With status message entered, save button hidden behind keypad on opening Dec 9, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 9, 2024

melvin-bot bot assigned allgandalf Dec 9, 2024

melvin-bot bot removed the Overdue label Dec 9, 2024

melvin-bot bot added the Overdue label Dec 11, 2024

melvin-bot bot removed the Overdue label Dec 12, 2024

This comment was marked as outdated.

Sign in to view

melvin-bot bot removed the Overdue label Jan 29, 2025

melvin-bot bot assigned pecanoro Feb 3, 2025

pecanoro assigned huult Feb 3, 2025

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Feb 3, 2025

huult mentioned this issue Feb 4, 2025

Fix: Save button must not be hidden behind keyboard on opening status… #56306

Closed

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Feb 4, 2025

huult mentioned this issue Feb 11, 2025

Fix save button hidden by keypad #56629

Merged

50 tasks

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Feb 11, 2025

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Mar 4, 2025

melvin-bot bot changed the title ~~[$250] Status - With status message entered, save button hidden behind keypad on opening~~ [Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening Mar 4, 2025

melvin-bot bot removed the Reviewing Has a PR in review label Mar 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening #53692

[Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening #53692

IuliiaHerets commented Dec 6, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Dec 6, 2024

melvin-bot bot commented Dec 9, 2024

melvin-bot bot commented Dec 9, 2024

M00rish commented Dec 10, 2024 •

edited

Loading

huult commented Dec 11, 2024 •

edited

Loading

allgandalf commented Dec 12, 2024

M00rish commented Dec 12, 2024

huult commented Dec 12, 2024

allgandalf commented Dec 16, 2024

This comment was marked as outdated.

melvin-bot bot commented Dec 16, 2024

M00rish commented Dec 16, 2024

huult commented Dec 16, 2024

allgandalf commented Dec 17, 2024 •

edited

Loading

mkzie2 commented Dec 17, 2024

mkzie2 commented Dec 17, 2024

M00rish commented Dec 17, 2024

huult commented Dec 17, 2024

melvin-bot bot commented Dec 20, 2024

allgandalf commented Jan 29, 2025

allgandalf commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

pecanoro commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

huult commented Feb 4, 2025

huult commented Feb 17, 2025

melvin-bot bot commented Mar 4, 2025

melvin-bot bot commented Mar 4, 2025

melvin-bot bot commented Mar 4, 2025

lschurr commented Mar 10, 2025

allgandalf commented Mar 10, 2025

[Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening #53692

[Due for payment 2025-03-11] [$250] Status - With status message entered, save button hidden behind keypad on opening #53692

Comments

IuliiaHerets commented Dec 6, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Dec 6, 2024

melvin-bot bot commented Dec 9, 2024

melvin-bot bot commented Dec 9, 2024

M00rish commented Dec 10, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

huult commented Dec 11, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Test branch

allgandalf commented Dec 12, 2024

M00rish commented Dec 12, 2024

huult commented Dec 12, 2024

allgandalf commented Dec 16, 2024

This comment was marked as outdated.

melvin-bot bot commented Dec 16, 2024

M00rish commented Dec 16, 2024

huult commented Dec 16, 2024

Proposal updated

allgandalf commented Dec 17, 2024 • edited Loading

mkzie2 commented Dec 17, 2024

Proposal

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

What is the root cause of that problem?

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

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Result

mkzie2 commented Dec 17, 2024

M00rish commented Dec 17, 2024

huult commented Dec 17, 2024

melvin-bot bot commented Dec 20, 2024

allgandalf commented Jan 29, 2025

allgandalf commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

pecanoro commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

melvin-bot bot commented Feb 3, 2025

huult commented Feb 4, 2025

huult commented Feb 17, 2025

melvin-bot bot commented Mar 4, 2025

melvin-bot bot commented Mar 4, 2025

melvin-bot bot commented Mar 4, 2025

lschurr commented Mar 10, 2025

allgandalf commented Mar 10, 2025

IuliiaHerets commented Dec 6, 2024 •

edited by melvin-bot bot

Loading

M00rish commented Dec 10, 2024 •

edited

Loading

huult commented Dec 11, 2024 •

edited

Loading

allgandalf commented Dec 17, 2024 •

edited

Loading