Add webShowOutline prop to text input (#847)

Author: YoussefHenna

packages/core/src/components/TextInput.tsx

@@ -2,16 +2,28 @@ import React from "react";
 import {
   TextInput as NativeTextInput,
   TextInputProps as NativeTextInputProps,
+  Platform,
 } from "react-native";
 import { useDebounce, useOnUpdate } from "../hooks";
 
 export interface TextInputProps extends NativeTextInputProps {
+  webShowOutline?: boolean;
   onChangeTextDelayed?: (text: string) => void;
   changeTextDelay?: number;
 }
 
 const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
-  ({ onChangeTextDelayed, changeTextDelay = 500, value, ...rest }, ref) => {
+  (
+    {
+      onChangeTextDelayed,
+      changeTextDelay = 500,
+      webShowOutline = true,
+      style,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
     const delayedValue = useDebounce(value, changeTextDelay);
 
     useOnUpdate(() => {
@@ -25,6 +37,11 @@ const TextInput = React.forwardRef<NativeTextInput, TextInputProps>(
         testID="native-text-input"
         ref={ref}
         value={value}
+        style={[
+          //@ts-ignore Web specific prop. Removes default blue outline that appears on the hidden TextInput
+          Platform.OS === "web" && !webShowOutline ? { outlineWidth: 0 } : {},
+          style,
+        ]}
         {...rest}
       />
     );