diff --git a/example/src/Examples/TextInputExample.tsx b/example/src/Examples/TextInputExample.tsx
index e537f5832b..193cd4477a 100644
--- a/example/src/Examples/TextInputExample.tsx
+++ b/example/src/Examples/TextInputExample.tsx
@@ -468,6 +468,13 @@ const TextInputExample = () => {
label="Custom rounded input"
/>
+
+
+
);
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 774b7f302d..26c361eb7c 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -295,6 +295,7 @@ class TextInputOutlined extends React.Component {
{
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,9 +378,11 @@ const Outline = ({
hasActiveOutline,
activeColor,
outlineColor,
+ focused,
backgroundColor,
}: OutlineProps) => (
{
expect(toJSON()).toMatchSnapshot();
});
+
+it('correctly applies error state Outline TextInput', () => {
+ const { getByTestId } = render(
+
+ );
+
+ 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(
+
+ );
+
+ 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 })])
+ );
+});
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index da38a1fc70..f9f5401782 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/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"
/>