Skip to content

Fix Page scrolls to the top after switching to landscape mode & entering number #87656

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

Merged
mjasikowski merged 4 commits into from
Apr 16, 2026
Merged

Fix Page scrolls to the top after switching to landscape mode & entering number #87656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4bcd7d8
Fix Page scrolls to the top after switching to landscape mode & enter…
GCyganek Apr 10, 2026
cb22214
Restore input errro in landscape mode and make number buttons smaller
GCyganek Apr 13, 2026
43a9455
Merge branch 'main' into @GCyganek/landscape-mode/number-with-symbol-…
GCyganek Apr 15, 2026
c80e876
Merge branch 'main' into @GCyganek/landscape-mode/number-with-symbol-…
GCyganek Apr 16, 2026
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
11 changes: 6 additions & 5 deletions src/components/BigNumberPad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i

const styles = useThemeStyles();
const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
const {isExtraSmallScreenHeight} = useResponsiveLayout();
const {isExtraSmallScreenHeight, isInLandscapeMode} = useResponsiveLayout();
const numberPressedRef = useRef(numberPressed);

useEffect(() => {
Expand Down Expand Up @@ -64,10 +64,10 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
style={[styles.flexColumn, styles.w100]}
id={id}
>
{padNumbers.map((row) => (
{padNumbers.map((row, index) => (
<View
key={`NumberPadRow-${row[0]}`}
style={[styles.flexRow, styles.mt3]}
style={[styles.flexRow, index === 0 && isInLandscapeMode ? undefined : styles.mt3]}
>
{row.map((column, columnIndex) => {
// Adding margin between buttons except first column to
Expand All @@ -77,8 +77,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
return (
<Button
key={column}
medium={isExtraSmallScreenHeight}
large={!isExtraSmallScreenHeight}
small={isInLandscapeMode}
medium={isExtraSmallScreenHeight && !isInLandscapeMode}
large={!isExtraSmallScreenHeight && !isInLandscapeMode}
shouldEnableHapticFeedback
style={[styles.flex1, marginLeft]}
text={column === '<' ? undefined : toLocaleDigit(column)}
Expand Down
68 changes: 68 additions & 0 deletions src/components/NumberWithSymbolForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type {ForwardedRef} from 'react';
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import type {KeyboardTypeOptions, NativeSyntheticEvent} from 'react-native';
import {View} from 'react-native';
import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
import useLocalize from '@hooks/useLocalize';
import {useMouseActions} from '@hooks/useMouseContext';
Expand Down Expand Up @@ -186,6 +187,7 @@ function NumberWithSymbolForm({
...props
}: NumberWithSymbolFormProps) {
const icons = useMemoizedLazyExpensifyIcons(['DownArrow', 'PlusMinus']);
const isInLandscapeMode = useIsInLandscapeMode();

const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
Expand Down Expand Up @@ -571,9 +573,75 @@ function NumberWithSymbolForm({
onFocus={props.onFocus}
accessibilityLabel={props.accessibilityLabel}
keyboardType={props.keyboardType}
shouldAllowFocusInLandscapeMode
/>
);

if (isInLandscapeMode) {
return (
<>
Comment thread
GCyganek marked this conversation as resolved.
<ScrollView
contentContainerStyle={[styles.flexGrow1, styles.flexRow]}
style={[styles.flex1, styles.ph5]}
>
<View style={[styles.justifyContentCenter, styles.alignItemsCenter, styles.numberWithSymbolFormInputContainerLandscape]}>
Comment thread
GCyganek marked this conversation as resolved.
<View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter]}>{textInputComponent}</View>
<View style={[styles.flexRow, styles.justifyContentCenter, styles.gap2]}>
{isSymbolPressable && (
<Button
shouldShowRightIcon
small
iconRight={icons.DownArrow}
onPress={onSymbolButtonPress}
style={styles.minWidth18}
isContentCentered
text={currency}
accessibilityLabel={`${translate('common.selectCurrency')}, ${currency}`}
/>
)}
{allowFlippingAmount && (
<Button
shouldShowRightIcon
small
iconRight={icons.PlusMinus}
onPress={toggleNegative}
style={styles.minWidth18}
isContentCentered
text={translate('iou.flip')}
accessibilityLabel={translate('iou.flip')}
/>
)}
</View>
{!!errorText && (
<FormHelpMessage
style={[styles.ph5, styles.w100]}
isError
message={errorText}
/>
)}
</View>

{shouldShowBigNumberPad ? (
<View
style={[styles.flex1, styles.justifyContentCenter]}
id={NUM_PAD_CONTAINER_VIEW_ID}
>
{shouldShowBigNumberPad ? (
<BigNumberPad
id={NUM_PAD_VIEW_ID}
numberPressed={updateValueNumberPad}
longPressHandlerStateChanged={updateLongPressHandlerState}
/>
) : null}
</View>
) : null}
</ScrollView>

{!!footer && <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper, styles.pt0]}>{footer}</View>}
</>
);
}

return (
<ScrollView
contentContainerStyle={styles.flexGrow1}
Expand Down
5 changes: 3 additions & 2 deletions src/components/TextInput/BaseTextInput/implementation/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ function BaseTextInput({
ref,
sentryLabel,
rightHandSideComponent,
shouldAllowFocusInLandscapeMode = false,
...props
}: BaseTextInputProps) {
const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
Expand Down Expand Up @@ -374,7 +375,7 @@ function BaseTextInput({
)}
<InputComponent
ref={(element: BaseTextInputRef | null): void => {
const baseTextInputRef = isInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;
const baseTextInputRef = isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? getLandscapeTextInputRefProxy(element) : element;

if (typeof ref === 'function') {
ref(baseTextInputRef);
Expand All @@ -388,7 +389,7 @@ function BaseTextInput({
}}
// eslint-disable-next-line
{...inputProps}
autoFocus={isInLandscapeMode ? false : inputProps.autoFocus}
autoFocus={isInLandscapeMode && !shouldAllowFocusInLandscapeMode ? false : inputProps.autoFocus}
accessibilityLabel={inputProps.accessibilityLabel ?? accessibilityLabel}
accessibilityValue={accessibilityValue}
accessibilityHint={errorText || inputProps.accessibilityHint}
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
navigation?: Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
getState(): NavigationState | undefined;
};

/** Whether the input should be allowed to be focused in landscape mode */
shouldAllowFocusInLandscapeMode?: boolean;
};

type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
Expand Down
1 change: 1 addition & 0 deletions src/components/TextInputWithSymbol/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ type BaseTextInputWithSymbolProps = {
| 'disabled'
| 'ref'
| 'accessibilityLabel'
| 'shouldAllowFocusInLandscapeMode'
>;

type TextInputWithSymbolProps = Omit<BaseTextInputWithSymbolProps, 'onSelectionChange'> & {
Expand Down
4 changes: 4 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2802,6 +2802,10 @@ const staticStyles = (theme: ThemeColors) =>
paddingHorizontal: 20,
},

numberWithSymbolFormInputContainerLandscape: {
width: 400,
},

avatarSectionWrapper: {
width: '100%',
alignItems: 'center',
Expand Down
Loading