fix(Autocomplete, ComboBox): disable browser autofill (#3419)

skbkontur · May 8, 2024 · f805126 · f805126
1 parent c47c213
commit f805126
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.tsx b/packages/react-ui/components/Autocomplete/Autocomplete.tsx
@@ -237,6 +237,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
     const inputProps = {
       ...rest,
       width: '100%',
+      autoComplete: 'off',
       onValueChange: this.handleValueChange,
       onKeyDown: this.handleKeyDown,
       onFocus: this.handleFocus,
@@ -307,6 +308,7 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
   private renderMobileMenu = () => {
     const inputProps: InputProps = {
+      autoComplete: 'off',
       autoFocus: true,
       width: '100%',
       onValueChange: this.handleValueChange,

diff --git a/packages/react-ui/components/Autocomplete/__tests__/Autocomplete-test.tsx b/packages/react-ui/components/Autocomplete/__tests__/Autocomplete-test.tsx
@@ -347,6 +347,12 @@ describe('<Autocomplete />', () => {
     expect(menuItems).toHaveTextContent('1');
   });
 
+  it('should disable default browser autofill', () => {
+    const props = { value: '', source: [], onValueChange: () => '' };
+    render(<Autocomplete {...props} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('autocomplete', 'off');
+  });
+
   describe('a11y', () => {
     it('should connect dropdown with input through aria-controls', async () => {
       const Comp = () => {

diff --git a/packages/react-ui/components/ComboBox/__tests__/ComboBox-test.tsx b/packages/react-ui/components/ComboBox/__tests__/ComboBox-test.tsx
@@ -1258,6 +1258,12 @@ describe('ComboBox', () => {
     expect(screen.getByTestId(InputLikeTextDataTids.nativeInput)).toBeDisabled();
   });
 
+  it('should disable default browser autofill', () => {
+    render(<ComboBox getItems={() => Promise.resolve([])} />);
+    userEvent.click(screen.getByTestId(InputLikeTextDataTids.root));
+    expect(screen.getByRole('textbox')).toHaveAttribute('autocomplete', 'off');
+  });
+
   describe('a11y', () => {
     it('props aria-describedby applied correctly on Input', () => {
       const getItems = () => {

diff --git a/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx b/packages/react-ui/internal/CustomComboBox/ComboBoxView.tsx
@@ -250,6 +250,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {
     }
 
     const inputProps: InputProps = {
+      autoComplete: 'off',
       autoFocus: true,
       width: '100%',
       onFocus,
@@ -333,6 +334,7 @@ export class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {
           ref={this.refInput}
           warning={warning}
           inputMode={inputMode}
+          autoComplete="off"
           aria-describedby={ariaDescribedby}
           aria-controls={this.menuId}
           aria-label={ariaLabel}