m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fixing focus outline (#17863)

Browse Source
This commit is contained in:
George Marshall 2023-02-22 09:14:40 -08:00 committed by GitHub
parent f57d10d857
commit ae3cd97690
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/component-library/form-text-field/__snapshots__/form-text-field.test.js.snap
View File

@ -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=""

2
ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
View File

@ -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=""

2
ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap
View File

@ -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=""

1
ui/components/component-library/text-field/text-field.js
View File

@ -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)}
/>

10
ui/components/component-library/text-field/text-field.test.js
View File

@ -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');
});
});

2
ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap
View File

@ -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"