Introduce Form autoComplete attribute and deprecate autocomplete (rjsf-team#1483)

* Introduce Form autoComplete attribute and deprecate autocomplete * Update documentation * limit warnings * fix tests for autocomplete

Author: lukaszzdanikowski

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 = {