From 621d26c3ac0a43c8d30bddd36e3dce99af89ae9e Mon Sep 17 00:00:00 2001
From: Luke Walczak <lukasz.walczak.pwr@gmail.com>
Date: Fri, 10 Dec 2021 15:24:49 +0100
Subject: [PATCH] fix: move outline outside of input view container (#2997)

---
 .../TextInput/TextInputOutlined.tsx           | 16 +++----
 .../__snapshots__/TextInput.test.js.snap      | 42 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 26c361eb7c..ed44fac014 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -291,15 +291,15 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
           This is so that the label can overlap the outline
           Otherwise the border will cut off the label on Android
           */}
+        <Outline
+          theme={theme}
+          hasActiveOutline={hasActiveOutline}
+          focused={parentState.focused}
+          activeColor={activeColor}
+          outlineColor={outlineColor}
+          backgroundColor={backgroundColor}
+        />
         <View>
-          <Outline
-            theme={theme}
-            hasActiveOutline={hasActiveOutline}
-            focused={parentState.focused}
-            activeColor={activeColor}
-            outlineColor={outlineColor}
-            backgroundColor={backgroundColor}
-          />
           <View
             style={[
               styles.labelContainer,
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index d2ebd2a2c3..b53bcdc74d 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -376,28 +376,28 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
 <View
   style={Object {}}
 >
+  <View
+    pointerEvents="none"
+    style={
+      Array [
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 6,
+        },
+        Object {
+          "backgroundColor": "#f6f6f6",
+          "borderColor": "rgba(0, 0, 0, 0.54)",
+          "borderRadius": 4,
+          "borderWidth": 1,
+        },
+      ]
+    }
+    testID="text-input-outline"
+  />
   <View>
-    <View
-      pointerEvents="none"
-      style={
-        Array [
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 6,
-          },
-          Object {
-            "backgroundColor": "#f6f6f6",
-            "borderColor": "rgba(0, 0, 0, 0.54)",
-            "borderRadius": 4,
-            "borderWidth": 1,
-          },
-        ]
-      }
-      testID="text-input-outline"
-    />
     <View
       style={
         Array [