disabling autocomplete for admin-on-rest SimpleForm

Question

Is there a possibility to disable autocomplete for AOR SimpleForm component? I tried various combinations of the following:

<SimpleForm autoComplete="off">

But nothing seems to work. Can it be customized in such a manner or does it require creating your own component? I need it specifically for AOR (not react-admin). Thanks in advance for any help.

Answer 1

I think you might struggle with the basic understanding on how to disable auto complete, so here's a catch up:

How does disabling auto complete work in HTML?

autocomplete is a HTML attributefor input elements. Possible values are on and off.

You can disable autocomplete by using it like this:

<input type="email" name="email" autocomplete="off">

How can I apply this to React?

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs

Source

The conclusion is, you have to set the property autoComplete to off on those components aka input fields, not on the from element around the input fields.

Example

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <input name="email" autoComplete='off' />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In your case, the components is propably called TextInput.

After looking at the source, I've found out that AOR uses TextField of material-ui, which accepts autoComplete as property.

So if you either pass input={{ autoComplete: 'off' }} or options={{ autoComplete: 'off' }} you should be good to go.