diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index 91591de7f045..cfc042b4f370 100644 --- 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.