Introduce Form autoComplete attribute and deprecate autocomplete

docs/form-customization.md

@@ -728,7 +728,7 @@ The `Form` component supports the following html attributes:
   method="post"
   target="_blank"
   action="/users/list"
-  autocomplete="off"
+  autoComplete="off"
   enctype="multipart/form-data"
   acceptcharset="ISO-8859-1" />
 ```

src/components/Form.js

@@ -316,7 +316,8 @@ export default class Form extends Component {
       method,
       target,
       action,
-      autocomplete,
+      autocomplete: deprecatedAutocomplete,
+      autoComplete: currentAutoComplete,
       enctype,
       acceptcharset,
       noHtml5Validate,
@@ -328,6 +329,14 @@ export default class Form extends Component {
     const registry = this.getRegistry();
     const _SchemaField = registry.fields.SchemaField;
     const FormTag = tagName ? tagName : "form";
+    if (deprecatedAutocomplete) {
+      console.warn(
+        "Using autocomplete property of Form is deprecated, use autoComplete instead."
+      );
+    }
+    const autoComplete = currentAutoComplete
+      ? currentAutoComplete
+      : deprecatedAutocomplete;
 
     return (
       <FormTag
@@ -337,7 +346,7 @@ export default class Form extends Component {
         method={method}
         target={target}
         action={action}
-        autoComplete={autocomplete}
+        autoComplete={autoComplete}
         encType={enctype}
         acceptCharset={acceptcharset}
         noValidate={noHtml5Validate}
@@ -400,6 +409,7 @@ if (process.env.NODE_ENV !== "production") {
     target: PropTypes.string,
     action: PropTypes.string,
     autocomplete: PropTypes.string,
+    autoComplete: PropTypes.string,
     enctype: PropTypes.string,
     acceptcharset: PropTypes.string,
     noValidate: PropTypes.bool,

test/Form_test.js

@@ -2082,7 +2082,7 @@ describeRepeated("Form common", createFormComponent => {
       method: "post",
       target: "_blank",
       action: "/users/list",
-      autocomplete: "off",
+      autoComplete: "off",
       enctype: "multipart/form-data",
       acceptcharset: "ISO-8859-1",
       noHtml5Validate: true,
@@ -2118,8 +2118,8 @@ describeRepeated("Form common", createFormComponent => {
       expect(node.getAttribute("action")).eql(formProps.action);
     });
 
-    it("should set attr autoComplete of form", () => {
-      expect(node.getAttribute("autocomplete")).eql(formProps.autocomplete);
+    it("should set attr autocomplete of form", () => {
+      expect(node.getAttribute("autocomplete")).eql(formProps.autoComplete);
     });
 
     it("should set attr enctype of form", () => {
@@ -2135,6 +2135,40 @@ describeRepeated("Form common", createFormComponent => {
     });
   });
 
+  describe("Deprecated autocomplete attribute", () => {
+    it("should set attr autocomplete of form", () => {
+      const formProps = {
+        schema: {},
+        autocomplete: "off",
+      };
+      const node = createFormComponent(formProps).node;
+      expect(node.getAttribute("autocomplete")).eql(formProps.autocomplete);
+    });
+
+    it("should log deprecation warning when it is used", () => {
+      sandbox.stub(console, "warn");
+      createFormComponent({
+        schema: {},
+        autocomplete: "off",
+      });
+      expect(
+        console.warn.calledWithMatch(
+          /Using autocomplete property of Form is deprecated/
+        )
+      ).to.be.true;
+    });
+
+    it("should use autoComplete value if both autocomplete and autoComplete are used", () => {
+      const formProps = {
+        schema: {},
+        autocomplete: "off",
+        autoComplete: "on",
+      };
+      const node = createFormComponent(formProps).node;
+      expect(node.getAttribute("autocomplete")).eql(formProps.autoComplete);
+    });
+  });
+
   describe("Custom format updates", () => {
     it("Should update custom formats when customFormats is changed", () => {
       const formProps = {