fix: outlined input error border width (#2975)

Author: enagorny

example/src/Examples/TextInputExample.tsx

@@ -468,6 +468,13 @@ const TextInputExample = () => {
             label="Custom rounded input"
           />
         </View>
+        <View style={styles.inputContainerStyle}>
+          <TextInput
+            mode="outlined"
+            label="Outlined text input with error"
+            error
+          />
+        </View>
       </ScreenWrapper>
     </TextInputAvoidingView>
   );

src/components/TextInput/TextInputOutlined.tsx

@@ -295,6 +295,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
           <Outline
             theme={theme}
             hasActiveOutline={hasActiveOutline}
+            focused={parentState.focused}
             activeColor={activeColor}
             outlineColor={outlineColor}
             backgroundColor={backgroundColor}
@@ -314,6 +315,7 @@ class TextInputOutlined extends React.Component<ChildTextInputProps> {
               labelBackground={LabelBackground}
             />
             {render?.({
+              testID: 'text-input-outlined',
               ...rest,
               ref: innerRef,
               onChangeText,
@@ -365,6 +367,7 @@ export default TextInputOutlined;
 type OutlineProps = {
   activeColor: string;
   hasActiveOutline?: boolean;
+  focused?: boolean;
   outlineColor?: string;
   backgroundColor: ColorValue;
   theme: ReactNativePaper.Theme;
@@ -375,17 +378,19 @@ const Outline = ({
   hasActiveOutline,
   activeColor,
   outlineColor,
+  focused,
   backgroundColor,
 }: OutlineProps) => (
   <View
+    testID="text-input-outline"
     pointerEvents="none"
     style={[
       styles.outline,
       // eslint-disable-next-line react-native/no-inline-styles
       {
         backgroundColor,
         borderRadius: theme.roundness,
-        borderWidth: hasActiveOutline ? 2 : 1,
+        borderWidth: focused ? 2 : 1,
         borderColor: hasActiveOutline ? activeColor : outlineColor,
       },
     ]}

src/components/__tests__/TextInput.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { render } from 'react-native-testing-library';
+import { fireEvent, render } from 'react-native-testing-library';
 import TextInput from '../TextInput/TextInput';
 import { red500 } from '../../styles/colors';
 
@@ -108,3 +108,43 @@ it('correctly applies height to multiline Outline TextInput', () => {
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+it('correctly applies error state Outline TextInput', () => {
+  const { getByTestId } = render(
+    <TextInput
+      mode="outlined"
+      label="Outline Input with error"
+      placeholder="Type Something"
+      value={'Some test value'}
+      error
+    />
+  );
+
+  const outline = getByTestId('text-input-outline');
+  expect(outline.props.style).toEqual(
+    expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })])
+  );
+});
+
+it('correctly applies focused state Outline TextInput', () => {
+  const { getByTestId } = render(
+    <TextInput
+      mode="outlined"
+      label="Outline Input with error"
+      placeholder="Type Something"
+      value={'Some test value'}
+      error
+    />
+  );
+
+  const outline = getByTestId('text-input-outline');
+  expect(outline.props.style).toEqual(
+    expect.arrayContaining([expect.objectContaining({ borderWidth: 1 })])
+  );
+
+  fireEvent(getByTestId('text-input-outlined'), 'focus');
+
+  expect(outline.props.style).toEqual(
+    expect.arrayContaining([expect.objectContaining({ borderWidth: 2 })])
+  );
+});

src/components/__tests__/__snapshots__/TextInput.test.js.snap

@@ -201,6 +201,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
           },
         ]
       }
+      testID="text-input-outline"
     />
     <View
       style={
@@ -392,6 +393,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
             ],
           ]
         }
+        testID="text-input-outlined"
         underlineColorAndroid="transparent"
         value="Some test value"
       />