Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Browser Autofill on Autocomplete Component popping randomly on Chrome

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

Browser Autofill is popping on Autocomplete Component randomly (sometimes yes, sometimes no) even though I used the necessary props (in React.JS) to prevent them.

Expected behavior 🤔

I don’t want any autofill on the fields

Steps to reproduce 🕹

Steps:

1.Use Chrome 2.Create an Autocomplete Component with a TextField render 3.set autoComplete: “new-password” in inputProps 4.

Context 🔦

I’m trying to accomplish a very serious project to a client, and this is preventing us from publishing the website

Your environment 🌎

`npx @mui/envinfo`

   System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.43)
  npmPackages:
    @emotion/react: 11.6.0 => 11.6.0
    @emotion/styled: 11.6.0 => 11.6.0
    @mui/core:  5.0.0-alpha.54
    @mui/icons-material: ^5.1.0 => 5.1.0
    @mui/lab: ^5.0.0-alpha.54 => 5.0.0-alpha.54
    @mui/material: 5.1.0 => 5.1.0
    @mui/private-theming:  5.1.0
    @mui/styled-engine:  5.1.0
    @mui/styles: ^5.1.0 => 5.1.0
    @mui/system:  5.1.0
    @mui/types:  7.1.0
    @mui/utils:  5.1.0
    @types/react:  17.0.24
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

michaldudakcommented, Feb 14, 2022

The params from renderInput override whatever value you set for the autoComplete prop, as it sets the inputProps.autocomplete. To make your override “win”, place it after the ...params and override the inputProps:

<TextField {...params} inputProps={{ ...params.inputProps, autoComplete: 'new-password' }} label="Movie" />

0reactions

jaduscommented, Feb 14, 2022

Perfect thank you !

Top Results From Across the Web

Unexpected Chrome Autofill Behaviour [disable chrome autofill]

It is likely Chrome is ignoring the autocomplete element because your input name is individualName . The autofill logic is done server-side ...

914451 - Autofill does not respect autocomplete="off" - Monorail

Status: Available (Open) Components: UI>Browser>Autofill ... I'm going to tell our customers to simply avoid Chrome because they refuse to follow useful ...

Unable to disable the browser auto complete feature ... - GitHub

I noticed that I could disable browser autofill manually, by going Chrome-Dev Tools > Inspect Autocomplete component, then: either a) remove ...

How can I disable Chrome's address bar search autocomplete?

Go to Chrome preferences - Advanced options - Disable : Use a prediction service to help complete searches and URLs typed in the...

Empirical Analysis of the Privacy Threats of Browser Form ...

Copyrights for components of this work owned by others than the ... Web Browsers; Autocomplete; Form Autofill; Data Exfiltration.