Skip to content

Commit 5de4e79

Browse files
techievivektechievivek
authored
Merge pull request Expensify#65071 from Krishna2323/krishna2323/issue/62907
fix: Android & iOS - Text is cut off in the search field when device font size is minimum.
2 parents 8846f19 + 01181e7 commit 5de4e79

13 files changed

Lines changed: 76 additions & 31 deletions

File tree

‎src/components/CurrencySymbolButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol, isCurrency
3838
src={Expensicons.DownArrow}
3939
fill={theme.icon}
4040
/>
41-
<Text style={styles.iouAmountText}>{currencySymbol}</Text>
41+
<Text style={[styles.iouAmountText, styles.lineHeightUndefined]}>{currencySymbol}</Text>
4242
</PressableWithoutFeedback>
4343
</Tooltip>
4444
) : (
4545
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
46-
<Text style={styles.iouAmountText}>{currencySymbol}</Text>
46+
<Text style={[styles.iouAmountText, styles.lineHeightUndefined]}>{currencySymbol}</Text>
4747
</View>
4848
);
4949
}

‎src/components/MoneyRequestAmountInput.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ type MoneyRequestAmountInputProps = {
9696

9797
/** The testID of the input. Used to locate this view in end-to-end tests. */
9898
testID?: string;
99-
} & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace' | 'submitBehavior'>;
99+
} & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix'>;
100100

101101
type Selection = {
102102
start: number;
@@ -136,6 +136,7 @@ function MoneyRequestAmountInput(
136136
testID,
137137
submitBehavior,
138138
shouldApplyPaddingToContainer = false,
139+
shouldUseDefaultLineHeightForPrefix = true,
139140
...props
140141
}: MoneyRequestAmountInputProps,
141142
forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -348,6 +349,7 @@ function MoneyRequestAmountInput(
348349
testID={testID}
349350
submitBehavior={submitBehavior}
350351
shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
352+
shouldUseDefaultLineHeightForPrefix={shouldUseDefaultLineHeightForPrefix}
351353
/>
352354
);
353355
}

‎src/components/MoneyRequestConfirmationList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -701,6 +701,7 @@ function MoneyRequestConfirmationList({
701701
maxLength={formattedTotalAmount.length + 1}
702702
contentWidth={(formattedTotalAmount.length + 1) * 8}
703703
shouldApplyPaddingToContainer
704+
shouldUseDefaultLineHeightForPrefix={false}
704705
/>
705706
),
706707
}));

‎src/components/SelectionList/SplitListItem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ function SplitListItem<TItem extends ListItem>({
143143
maxLength={formattedOriginalAmount.length + 1}
144144
contentWidth={(formattedOriginalAmount.length + 1) * 8}
145145
shouldApplyPaddingToContainer
146+
shouldUseDefaultLineHeightForPrefix={false}
146147
/>
147148
</View>
148149
<View style={[styles.popoverMenuIcon, styles.pointerEventsAuto]}>

‎src/components/TextInput/BaseTextInput/implementation/index.native.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function BaseTextInput(
7878
placeholderTextColor,
7979
onClearInput,
8080
iconContainerStyle,
81+
shouldUseDefaultLineHeightForPrefix = true,
8182
...props
8283
}: BaseTextInputProps,
8384
ref: ForwardedRef<BaseTextInputRef>,
@@ -275,6 +276,7 @@ function BaseTextInput(
275276
shouldAddPaddingBottom && styles.pb1,
276277
]);
277278

279+
const verticalPaddingDiff = StyleUtils.getVerticalPaddingDiffFromStyle(newTextInputContainerStyles);
278280
const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft);
279281
const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
280282

@@ -300,7 +302,7 @@ function BaseTextInput(
300302
variables.componentSizeLarge,
301303
typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
302304
),
303-
isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge},
305+
isAutoGrowHeightMarkdown && {minHeight: variables.inputHeight},
304306
!isMultiline && styles.componentHeightLarge,
305307
touchableInputWrapperStyle,
306308
]}
@@ -346,7 +348,7 @@ function BaseTextInput(
346348
</View>
347349
)}
348350
{!!prefixCharacter && (
349-
<View style={[styles.textInputPrefixWrapper, prefixContainerStyle]}>
351+
<View style={[styles.textInputPrefixWrapper, prefixContainerStyle, shouldApplyHeight && {height}]}>
350352
<Text
351353
onLayout={(event) => {
352354
if (event.nativeEvent.layout.width === 0 && event.nativeEvent.layout.height === 0) {
@@ -358,6 +360,7 @@ function BaseTextInput(
358360
tabIndex={-1}
359361
style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]}
360362
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
363+
shouldUseDefaultLineHeight={!!shouldUseDefaultLineHeightForPrefix && !shouldApplyHeight}
361364
>
362365
{prefixCharacter}
363366
</Text>
@@ -431,7 +434,7 @@ function BaseTextInput(
431434
)}
432435
{((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && (
433436
<TextInputClearButton
434-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false)}
437+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)}
435438
onPressButton={() => {
436439
setValue('');
437440
onClearInput?.();
@@ -443,17 +446,16 @@ function BaseTextInput(
443446
size="small"
444447
color={theme.iconSuccessFill}
445448
style={[
446-
StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
449+
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff),
447450
styles.ml1,
448-
styles.justifyContentStart,
449451
loadingSpinnerStyle,
450452
StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
451453
]}
452454
/>
453455
)}
454456
{!!inputProps.secureTextEntry && (
455457
<Checkbox
456-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel)}
458+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff)}
457459
onPress={togglePasswordVisibility}
458460
onMouseDown={(event) => {
459461
event.preventDefault();
@@ -467,7 +469,13 @@ function BaseTextInput(
467469
</Checkbox>
468470
)}
469471
{!inputProps.secureTextEntry && !!icon && (
470-
<View style={[StyleUtils.getTextInputIconContainerStyles(hasLabel), !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
472+
<View
473+
style={[
474+
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff),
475+
!isReadOnly ? styles.cursorPointer : styles.pointerEventsNone,
476+
iconContainerStyle,
477+
]}
478+
>
471479
<Icon
472480
src={icon}
473481
fill={theme.icon}

‎src/components/TextInput/BaseTextInput/implementation/index.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ function BaseTextInput(
8080
placeholderTextColor,
8181
onClearInput,
8282
iconContainerStyle,
83+
shouldUseDefaultLineHeightForPrefix = true,
8384
...inputProps
8485
}: BaseTextInputProps,
8586
ref: ForwardedRef<BaseTextInputRef>,
@@ -280,12 +281,12 @@ function BaseTextInput(
280281
shouldAddPaddingBottom && styles.pb1,
281282
]);
282283

284+
const verticalPaddingDiff = StyleUtils.getVerticalPaddingDiffFromStyle(newTextInputContainerStyles);
283285
const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + styles.pl1.paddingLeft);
284286
const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
285287
// This is workaround for https://github.com/Expensify/App/issues/47939: in case when user is using Chrome on Android we set inputMode to 'search' to disable autocomplete bar above the keyboard.
286288
// If we need some other inputMode (eg. 'decimal'), then the autocomplete bar will show, but we can do nothing about it as it's a known Chrome bug.
287289
const inputMode = inputProps.inputMode ?? (isMobileChrome() ? 'search' : undefined);
288-
289290
return (
290291
<>
291292
<View
@@ -368,7 +369,7 @@ function BaseTextInput(
368369
tabIndex={-1}
369370
style={[styles.textInputPrefix, !hasLabel && styles.pv0, styles.pointerEventsNone, prefixStyle]}
370371
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
371-
shouldUseDefaultLineHeight={!Object.keys(StyleSheet.flatten(prefixStyle)).includes('lineHeight')}
372+
shouldUseDefaultLineHeight={shouldUseDefaultLineHeightForPrefix}
372373
>
373374
{prefixCharacter}
374375
</Text>
@@ -453,7 +454,7 @@ function BaseTextInput(
453454
}}
454455
>
455456
<TextInputClearButton
456-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false)}
457+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)}
457458
onPressButton={() => {
458459
setValue('');
459460
onClearInput?.();
@@ -466,17 +467,16 @@ function BaseTextInput(
466467
size="small"
467468
color={theme.iconSuccessFill}
468469
style={[
469-
StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
470+
StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff),
470471
styles.ml1,
471-
styles.justifyContentStart,
472472
loadingSpinnerStyle,
473473
StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
474474
]}
475475
/>
476476
)}
477477
{!!inputProps.secureTextEntry && (
478478
<Checkbox
479-
style={StyleUtils.getTextInputIconContainerStyles(hasLabel)}
479+
style={StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff)}
480480
onPress={togglePasswordVisibility}
481481
onMouseDown={(e) => {
482482
e.preventDefault();
@@ -490,7 +490,13 @@ function BaseTextInput(
490490
</Checkbox>
491491
)}
492492
{!inputProps.secureTextEntry && !!icon && (
493-
<View style={[StyleUtils.getTextInputIconContainerStyles(hasLabel), !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
493+
<View
494+
style={[
495+
StyleUtils.getTextInputIconContainerStyles(hasLabel, true, verticalPaddingDiff),
496+
!isReadOnly ? styles.cursorPointer : styles.pointerEventsNone,
497+
iconContainerStyle,
498+
]}
499+
>
494500
<Icon
495501
src={icon}
496502
fill={theme.icon}

‎src/components/TextInput/BaseTextInput/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,9 @@ type CustomBaseTextInputProps = {
186186

187187
/** Whether the input should be enforced to take full height of container. Default is `false` */
188188
shouldUseFullInputHeight?: boolean;
189+
190+
/** Whether the input prefix should use the default `Text` line height fallback. Disable this if you intentionally want the prefix to have `lineHeight: undefined` */
191+
shouldUseDefaultLineHeightForPrefix?: boolean;
189192
};
190193

191194
type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;

‎src/components/TextInputWithCurrencySymbol/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ type BaseTextInputWithCurrencySymbolProps = {
8383

8484
/** The test ID of TextInput. Used to locate the view in end-to-end tests. */
8585
testID?: string;
86-
} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrow' | 'autoGrowExtraSpace' | 'contentWidth' | 'onPress' | 'submitBehavior'>;
86+
} & Pick<BaseTextInputProps, 'autoFocus' | 'autoGrow' | 'autoGrowExtraSpace' | 'contentWidth' | 'onPress' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix'>;
8787

8888
type TextInputWithCurrencySymbolProps = Omit<BaseTextInputWithCurrencySymbolProps, 'onSelectionChange'> & {
8989
onSelectionChange?: (start: number, end: number) => void;

‎src/pages/workspace/taxes/ValuePage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function ValuePage({
9595
extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2}
9696
// We increase the amount max length to support the extra decimals.
9797
amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES}
98-
extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
98+
extraSymbol={<Text style={[styles.iouAmountText, styles.lineHeightUndefined]}>%</Text>}
9999
ref={inputCallbackRef}
100100
autoGrowExtraSpace={variables.w80}
101101
autoGrowMarginSide="left"

‎src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function WorkspaceCreateTaxPage({
117117
extraDecimals={CONST.MAX_TAX_RATE_DECIMAL_PLACES - 2}
118118
// We increase the amount max length to support the extra decimals.
119119
amountMaxLength={CONST.MAX_TAX_RATE_INTEGER_PLACES}
120-
extraSymbol={<Text style={styles.iouAmountText}>%</Text>}
120+
extraSymbol={<Text style={[styles.iouAmountText, styles.lineHeightUndefined]}>%</Text>}
121121
autoGrowExtraSpace={variables.w80}
122122
autoGrowMarginSide="left"
123123
style={[styles.iouAmountTextInput, styles.textAlignRight]}

0 commit comments

Comments
 (0)