From ae3cd9769090784b53a011e5437e9627be6dc65a Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 22 Feb 2023 09:14:40 -0800
Subject: [PATCH] Fixing focus outline (#17863)

---
 .../__snapshots__/form-text-field.test.js.snap         |  2 +-
 .../__snapshots__/text-field-search.test.js.snap       |  2 +-
 .../text-field/__snapshots__/text-field.test.js.snap   |  2 +-
 .../component-library/text-field/text-field.js         |  1 +
 .../component-library/text-field/text-field.test.js    | 10 ++++++++++
 .../keychains/__snapshots__/reveal-seed.test.js.snap   |  2 +-
 6 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap b/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
index 0e68bd298..465449624 100644
--- a/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
+++ b/ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
@@ -10,7 +10,7 @@ exports[`FormTextField should render correctly 1`] = `
     >
       <input
         autocomplete="off"
-        class="box mm-text mm-input mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
+        class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
         focused="false"
         type="text"
         value=""
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
index ddb232239..301fe0e4a 100644
--- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
@@ -11,7 +11,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
     />
     <input
       autocomplete="off"
-      class="box mm-text mm-input mm-text-field__input mm-text--body-md mm-text--color-text-default box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--background-color-transparent box--border-style-none"
+      class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--background-color-transparent box--border-style-none"
       focused="false"
       type="search"
       value=""
diff --git a/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
index 3d38993d5..fb40bafa0 100644
--- a/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
+++ b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
@@ -7,7 +7,7 @@ exports[`TextField should render correctly 1`] = `
   >
     <input
       autocomplete="off"
-      class="box mm-text mm-input mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
+      class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
       focused="false"
       type="text"
       value=""
diff --git a/ui/components/component-library/text-field/text-field.js b/ui/components/component-library/text-field/text-field.js
index 1ae6da13b..d8cc8b9ed 100644
--- a/ui/components/component-library/text-field/text-field.js
+++ b/ui/components/component-library/text-field/text-field.js
@@ -135,6 +135,7 @@ export const TextField = ({
         required={required}
         value={value}
         type={type}
+        disableStateStyles
         {...inputProps} // before className so input className isn't overridden
         className={classnames('mm-text-field__input', inputProps?.className)}
       />
diff --git a/ui/components/component-library/text-field/text-field.test.js b/ui/components/component-library/text-field/text-field.test.js
index 408786d63..303056bae 100644
--- a/ui/components/component-library/text-field/text-field.test.js
+++ b/ui/components/component-library/text-field/text-field.test.js
@@ -245,4 +245,14 @@ describe('TextField', () => {
     fireEvent.change(textField, { target: { value: '' } }); // reset value
     expect(textField.value).toBe(''); // value is empty string after reset
   });
+  it('should render the child Input with disableStateStyles to prevent multiple focus outlines', async () => {
+    const { getByTestId, user } = renderWithUserEvent(
+      <TextField inputProps={{ 'data-testid': 'input' }} />,
+    );
+    const InputComponent = getByTestId('input');
+
+    await user.click(InputComponent);
+    expect(getByTestId('input')).toHaveFocus();
+    expect(getByTestId('input')).toHaveClass('mm-input--disable-state-styles');
+  });
 });
diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
index 6ce6a23bc..a92a764dc 100644
--- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
+++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
@@ -98,7 +98,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = `
       >
         <input
           autocomplete="off"
-          class="box mm-text mm-input mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
+          class="box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-text--color-text-default box--padding-right-4 box--padding-left-4 box--flex-direction-row box--background-color-transparent box--border-style-none"
           data-testid="input-password"
           focused="true"
           id="password-box"