fix: textinput long text causes wrapping (ios) (#4261)

callstack · Jan 10, 2024 · f5c8485 · f5c8485
1 parent 6dd615d
commit f5c8485
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 31 deletions.
diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
@@ -31,9 +31,13 @@ const initialState: State = {
   outlinedText: '',
   largeText: '',
   flatTextPassword: 'Password',
+  flatLongText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
   outlinedLargeText: '',
   outlinedCustomLabel: '',
   outlinedTextPassword: '',
+  outlinedLongText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae odio quis dolor tempor mattis at non sem. Suspendisse et sem tincidunt, accumsan massa eleifend, euismod dui. Praesent eget urna lectus.',
   nameNoPadding: '',
   customStyleText: '',
   nameRequired: '',
@@ -89,9 +93,11 @@ const TextInputExample = () => {
     outlinedText,
     largeText,
     flatTextPassword,
+    flatLongText,
     outlinedLargeText,
     outlinedCustomLabel,
     outlinedTextPassword,
+    outlinedLongText,
     nameNoPadding,
     customStyleText,
     nameRequired,
@@ -249,6 +255,19 @@ const TextInputExample = () => {
                 />
               }
             />
+            <TextInput
+              style={[
+                styles.inputContainerStyle,
+                styles.fixedHeight,
+                styles.autoText,
+              ]}
+              label="Flat input long text"
+              placeholder="Type something"
+              value={flatLongText}
+              onChangeText={(flatLongText) =>
+                inputActionHandler('flatLongText', flatLongText)
+              }
+            />
           </List.Accordion>
           <List.Accordion title="Outlined inputs" id="outlined">
             <TextInput
@@ -324,6 +343,20 @@ const TextInputExample = () => {
                 />
               }
             />
+            <TextInput
+              mode="outlined"
+              style={[
+                styles.inputContainerStyle,
+                styles.fixedHeight,
+                styles.autoText,
+              ]}
+              label="Outlined input long text"
+              placeholder="Type something"
+              value={outlinedLongText}
+              onChangeText={(outlinedLongText) =>
+                inputActionHandler('outlinedLongText', outlinedLongText)
+              }
+            />
           </List.Accordion>
           <List.Accordion title="Disabled inputs" id="disabled">
             <TextInput
@@ -873,6 +906,9 @@ const styles = StyleSheet.create({
   right: {
     width: '70%',
   },
+  autoText: {
+    textAlign: 'auto',
+  },
 });
 
 export default TextInputExample;
diff --git a/example/utils/index.ts b/example/utils/index.ts
@@ -23,9 +23,11 @@ export type State = {
   outlinedText: string;
   largeText: string;
   flatTextPassword: string;
+  flatLongText: string;
   outlinedLargeText: string;
   outlinedCustomLabel: string;
   outlinedTextPassword: string;
+  outlinedLongText: string;
   nameNoPadding: string;
   customStyleText: string;
   nameRequired: string;

diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -94,7 +94,8 @@ const TextInputFlat = ({
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-  const lineHeight = lineHeightStyle || fontSize * 1.2;
+  const lineHeight =
+    lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);
 
   const isPaddingHorizontalPassed =
     paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -97,7 +97,8 @@ const TextInputOutlined = ({
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
-  const lineHeight = lineHeightStyle || fontSize * 1.2;
+  const lineHeight =
+    lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);
 
   const {
     inputTextColor,

diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
@@ -382,7 +382,8 @@ it("correctly applies theme background to label when input's background is trans
   });
 });
 
-it('always applies line height, even if not specified', () => {
+it('always applies line height for web, even if not specified', () => {
+  Platform.OS = 'web';
   const { getByTestId } = render(
     <View>
       <TextInput
@@ -446,7 +447,9 @@ it('always applies line height, even if not specified', () => {
   expect(getByTestId('large-font')).toHaveStyle({ lineHeight: 30 * 1.2 });
   expect(getByTestId('large-font-flat')).toHaveStyle({ lineHeight: 30 * 1.2 });
 
-  expect(getByTestId('custom-line-height')).toHaveStyle({ lineHeight: 29 });
+  expect(getByTestId('custom-line-height')).toHaveStyle({
+    lineHeight: 29,
+  });
   expect(getByTestId('custom-line-height-flat')).toHaveStyle({
     lineHeight: 29,
   });

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -352,7 +352,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -398,7 +398,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -462,7 +462,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -566,7 +566,7 @@ exports[`correctly applies cursorColor prop 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -604,7 +604,7 @@ exports[`correctly applies cursorColor prop 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -660,7 +660,7 @@ exports[`correctly applies cursorColor prop 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -764,7 +764,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -802,7 +802,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -858,7 +858,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -954,7 +954,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             "fontWeight": undefined,
             "left": 8,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "opacity": 1,
             "paddingHorizontal": 0,
             "position": "absolute",
@@ -996,7 +996,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingHorizontal": 16,
@@ -1033,7 +1033,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingHorizontal": 16,
@@ -1089,7 +1089,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingHorizontal": 16,
             "textAlign": "left",
@@ -1192,7 +1192,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1230,7 +1230,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1286,7 +1286,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -1392,7 +1392,7 @@ exports[`correctly applies textAlign center 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1430,7 +1430,7 @@ exports[`correctly applies textAlign center 1`] = `
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1486,7 +1486,7 @@ exports[`correctly applies textAlign center 1`] = `
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 16,
@@ -1590,7 +1590,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1628,7 +1628,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 16,
@@ -1684,7 +1684,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 16,
             "paddingRight": 56,
@@ -1733,7 +1733,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
           },
           {
             "color": "#f44336",
@@ -1990,7 +1990,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 56,
@@ -2028,7 +2028,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "fontWeight": undefined,
             "left": 0,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "maxWidth": 73,
             "opacity": 0,
             "paddingLeft": 56,
@@ -2084,7 +2084,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
             "minWidth": 65,
             "paddingLeft": 56,
             "paddingRight": 56,
@@ -2293,7 +2293,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "fontSize": 16,
             "fontWeight": undefined,
             "letterSpacing": 0.15,
-            "lineHeight": 19.2,
+            "lineHeight": undefined,
           },
           {
             "color": "#f44336",