Merge pull request #28126 from ayazalavi/ayaz/safari_line_height_issue

added browser check for setting line height

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 (
         <>
             <View style={styles.pointerEventsNone}>
@@ -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),