[Autocomplete] Document how to disable chrome autofill

docs/src/pages/components/autocomplete/CountrySelect.js

@@ -49,7 +49,7 @@ export default function CountrySelect() {
           fullWidth
           inputProps={{
             ...params.inputProps,
-            autoComplete: 'disabled', // disable autocomplete and autofill
+            autoComplete: 'new-password', // disable autocomplete and autofill
           }}
         />
       )}

docs/src/pages/components/autocomplete/CountrySelect.tsx

@@ -49,7 +49,7 @@ export default function CountrySelect() {
           fullWidth
           inputProps={{
             ...params.inputProps,
-            autoComplete: 'disabled', // disable autocomplete and autofill
+            autoComplete: 'new-password', // disable autocomplete and autofill
           }}
         />
       )}

docs/src/pages/components/autocomplete/autocomplete.md

@@ -167,6 +167,28 @@ Search within 10,000 randomly generated options. The list is virtualized thanks
 
 ## Limitations
 
+### autocomplete/autofill
+
+The browsers have heuristics to help the users fill the form inputs.
+However, it can harm the UX of the component.
+
+By default, the components disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute.
+
+However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details).
+In the event you want the avoid autofill, you can try the following:
+
+- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id.
+- Set `autoComplete="new-password"`:
+  ```jsx
+  <TextField
+    {...params}
+    inputProps={{
+      ...params.inputProps,
+      autoComplete: 'new-password',
+    }}
+  />
+  ```
+
 ### iOS VoiceOver
 
 VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well.