Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

handle login scroll on virtual viewport #42603

Merged
merged 6 commits into from
Jun 11, 2024
Merged

handle login scroll on virtual viewport #42603

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ed7f2f7
handle login scroll on virtual viewport
suneox May 15, 2024
74c7ab7
Merge remote-tracking branch 'upstream/main' into 41108-login-scroll-…
suneox May 27, 2024
23e36e6
update specific platform
suneox Jun 3, 2024
e992245
fix eslint
suneox Jun 4, 2024
b18b681
explain change behavior
suneox Jun 6, 2024
d7714ee
fix eslint
suneox Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ScreenWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ function ScreenWrapper(
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const isAvoidingViewportScroll = useTackInputFocus(shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileSafari());
const isAvoidingViewportScroll = useTackInputFocus(shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit());
const contextValue = useMemo(() => ({didScreenTransitionEnd}), [didScreenTransitionEnd]);

return (
Expand Down
21 changes: 19 additions & 2 deletions src/pages/signin/LoginForm/BaseLoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {useIsFocused} from '@react-navigation/native';
import Str from 'expensify-common/lib/str';
import type {ForwardedRef} from 'react';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import {InteractionManager, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import DotIndicatorMessage from '@components/DotIndicatorMessage';
Expand All @@ -19,6 +19,7 @@ import useNetwork from '@hooks/useNetwork';
import usePrevious from '@hooks/usePrevious';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Browser from '@libs/Browser';
import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
import * as ErrorUtils from '@libs/ErrorUtils';
import isInputAutoFilled from '@libs/isInputAutoFilled';
Expand All @@ -35,6 +36,8 @@ import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import type {CloseAccountForm} from '@src/types/form';
import type {Account, Credentials} from '@src/types/onyx';
import htmlDivElementRef from '@src/types/utils/htmlDivElementRef';
import viewRef from '@src/types/utils/viewRef';
import type LoginFormProps from './types';
import type {InputHandle} from './types';

Expand Down Expand Up @@ -216,6 +219,16 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
const serverErrorText = useMemo(() => (account ? ErrorUtils.getLatestErrorMessage(account) : ''), [account]);
const shouldShowServerError = !!serverErrorText && !formError;

const submitContainerRef = useRef<View | HTMLDivElement>(null);
const handleFocus = useCallback(() => {
if (!Browser.isMobileWebKit()) {
return;
}
InteractionManager.runAfterInteractions(() => {
htmlDivElementRef(submitContainerRef).current?.scrollIntoView?.({behavior: 'smooth', block: 'end'});
});
}, []);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please add some comments to explain the intent of this callback?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated explanation for this change


return (
<>
<View
Expand Down Expand Up @@ -250,6 +263,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
}, 500)
: undefined
}
onFocus={handleFocus}
onChangeText={onTextInput}
onSubmitEditing={validateAndSubmitForm}
autoCapitalize="none"
Expand All @@ -273,7 +287,10 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
// We need to unmount the submit button when the component is not visible so that the Enter button
// key handler gets unsubscribed
isVisible && (
<View style={[shouldShowServerError ? {} : styles.mt5]}>
<View
style={[shouldShowServerError ? {} : styles.mt5]}
ref={viewRef(submitContainerRef)}
>
<FormAlertWithSubmitButton
buttonText={translate('common.continue')}
isLoading={account?.isLoading && account?.loadingForm === CONST.FORMS.LOGIN_FORM}
Expand Down
Loading