Merge pull request #28580 from ayazalavi/ayaz/safari_line_height_issue

removed chrome check for fixing regression
Expensify · Oct 11, 2023 · 918a50a · 918a50a
2 parents ac1bdf3 + 1a1dbec
commit 918a50a
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
@@ -243,17 +243,17 @@ function BaseTextInput(props) {
     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)) {
+        if ((Browser.isSafari() || Browser.isMobileChrome()) && _.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]);
+    }, [props.inputStyle]);
 
     return (
         <>
@@ -346,6 +346,10 @@ function BaseTextInput(props) {
                                     // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
                                     !isMultiline && {height, lineHeight},
 
+                                    // Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
+                                    // for the issue mentioned here https://github.com/Expensify/App/issues/26735
+                                    !isMultiline && Browser.isMobileChrome() && {boxSizing: 'content-box', height: undefined},
+
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
                                     // Add disabled color theme when field is not editable.