From c7bedca6452e2658f48f59f8c9c02dbc4ed1bc41 Mon Sep 17 00:00:00 2001
From: Luke Walczak <lukasz.walczak.pwr@gmail.com>
Date: Fri, 10 Dec 2021 10:15:15 +0100
Subject: [PATCH] fix: correct long label in outlined text input (#2960)

---
 example/src/Examples/TextInputExample.tsx              | 10 ++++++++++
 example/utils/index.ts                                 |  1 +
 src/components/TextInput/Label/LabelBackground.tsx     |  5 ++++-
 .../__tests__/__snapshots__/TextInput.test.js.snap     |  3 ++-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index 193cd4477a..de05e0e640 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -28,6 +28,7 @@ const initialState: State = {
   outlinedMultiline: '',
   outlinedTextArea: '',
   outlinedColors: '',
+  outlinedLongLabel: '',
   maxLengthName: '',
   flatTextSecureEntry: true,
   outlineTextSecureEntry: true,
@@ -391,6 +392,15 @@ const TextInputExample = () => {
           outlineColor={pink400}
           activeOutlineColor={amber900}
         />
+        <TextInput
+          mode="outlined"
+          style={styles.inputContainerStyle}
+          label="Outlined with super long label which is truncating at some point"
+          placeholder="Type something"
+          onChangeText={(outlinedLongLabel) =>
+            inputActionHandler('outlinedLongLabel', outlinedLongLabel)
+          }
+        />
         <View style={styles.inputContainerStyle}>
           <TextInput
             label="Input with helper text"
diff --git a/example/utils/index.ts b/example/utils/index.ts
index 632f6e9f18..df7e24e6e6 100644
--- a/example/utils/index.ts
+++ b/example/utils/index.ts
@@ -31,6 +31,7 @@ export type State = {
   outlinedMultiline: string;
   outlinedTextArea: string;
   outlinedColors: string;
+  outlinedLongLabel: string;
   maxLengthName: string;
   flatTextSecureEntry: boolean;
   outlineTextSecureEntry: boolean;
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
index e91037ddf3..a4ac665f30 100644
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ b/src/components/TextInput/Label/LabelBackground.tsx
@@ -70,6 +70,9 @@ const LabelBackground = ({
                   }),
                 },
               ],
+              maxWidth:
+                parentState.labelLayout.width -
+                2 * placeholderStyle.paddingHorizontal,
             },
           ]}
           numberOfLines={1}
@@ -87,7 +90,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 6,
     left: 10,
-    width: 8,
+    width: 12,
   },
   outlinedLabel: {
     position: 'absolute',
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index f9f5401782..dde1a764c8 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -250,7 +250,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
                   "translateX": -3,
                 },
               ],
-              "width": 8,
+              "width": 12,
             }
           }
         />
@@ -264,6 +264,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
               "fontSize": 16,
               "fontWeight": undefined,
               "left": 18,
+              "maxWidth": -28,
               "opacity": 1,
               "paddingHorizontal": 0,
               "position": "absolute",