From 6545a81d51542e0d4c71f2ec1fc8983ecd27568b Mon Sep 17 00:00:00 2001 From: Ayaz Alavi Date: Mon, 25 Sep 2023 15:47:08 +0500 Subject: [PATCH] added browser check for setting line height --- src/components/TextInput/BaseTextInput.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 065c67349748..eef918ce0a7b 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {useState, useRef, useEffect, useCallback} from 'react'; +import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react'; import {Animated, View, StyleSheet} from 'react-native'; import Str from 'expensify-common/lib/str'; import RNTextInput from '../RNTextInput'; @@ -236,6 +236,25 @@ function BaseTextInput(props) { ]); const isMultiline = props.multiline || props.autoGrowHeight; + /* To prevent text jumping caused by virtual DOM calculations on Safari and mobile Chrome, + make sure to include the `lineHeight`. + Reference: https://github.com/Expensify/App/issues/26735 + + For other platforms, explicitly remove `lineHeight` from single-line inputs + to prevent long text from disappearing once it exceeds the input space. + See https://github.com/Expensify/App/issues/13802 */ + const lineHeight = useMemo(() => { + if (Browser.isSafari() && _.isArray(props.inputStyle)) { + const lineHeightValue = _.find(props.inputStyle, (f) => f.lineHeight !== undefined) + if(lineHeightValue) { + return lineHeightValue.lineHeight + } + } else if (Browser.isSafari() || Browser.isMobileChrome()) { + return height; + } + return undefined; + }, [props.inputStyle, height]) + return ( <> @@ -321,7 +340,7 @@ function BaseTextInput(props) { // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802) - !isMultiline && {height, lineHeight: undefined}, + !isMultiline && {height, lineHeight}, // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled. props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),