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

[IuliiaHerets]

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:

1. Launch app in both mweb and app
2. Open settings -- profile--status
3. Note save button can be be seen when status message is empty
4. Enter a status message and save
5. 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:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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: @allgandalf

[melvin-bot]

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]

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

[melvin-bot]

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

[M00rish]

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]

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:

1. 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]);

2. 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}
  >

3. 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.

1. 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);
	});
	});
	},
	}));

2. 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.