fix: move outline outside of input view container (#2997)

callstack · Dec 10, 2021 · 621d26c · 621d26c
1 parent 6c2e534
commit 621d26c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git 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
@@ -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 [