Skip to content

Commit 13ceea7

Browse files
lukaszzdanikowskiepicfaace
authored andcommitted
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
1 parent 5d167ac commit 13ceea7

File tree

3 files changed

+50
-6
lines changed

3 files changed

+50
-6
lines changed

docs/form-customization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -728,7 +728,7 @@ The `Form` component supports the following html attributes:
728728
method="post"
729729
target="_blank"
730730
action="/users/list"
731-
autocomplete="off"
731+
autoComplete="off"
732732
enctype="multipart/form-data"
733733
acceptcharset="ISO-8859-1" />
734734
```

src/components/Form.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,8 @@ export default class Form extends Component {
316316
method,
317317
target,
318318
action,
319-
autocomplete,
319+
autocomplete: deprecatedAutocomplete,
320+
autoComplete: currentAutoComplete,
320321
enctype,
321322
acceptcharset,
322323
noHtml5Validate,
@@ -328,6 +329,14 @@ export default class Form extends Component {
328329
const registry = this.getRegistry();
329330
const _SchemaField = registry.fields.SchemaField;
330331
const FormTag = tagName ? tagName : "form";
332+
if (deprecatedAutocomplete) {
333+
console.warn(
334+
"Using autocomplete property of Form is deprecated, use autoComplete instead."
335+
);
336+
}
337+
const autoComplete = currentAutoComplete
338+
? currentAutoComplete
339+
: deprecatedAutocomplete;
331340

332341
return (
333342
<FormTag
@@ -337,7 +346,7 @@ export default class Form extends Component {
337346
method={method}
338347
target={target}
339348
action={action}
340-
autoComplete={autocomplete}
349+
autoComplete={autoComplete}
341350
encType={enctype}
342351
acceptCharset={acceptcharset}
343352
noValidate={noHtml5Validate}
@@ -400,6 +409,7 @@ if (process.env.NODE_ENV !== "production") {
400409
target: PropTypes.string,
401410
action: PropTypes.string,
402411
autocomplete: PropTypes.string,
412+
autoComplete: PropTypes.string,
403413
enctype: PropTypes.string,
404414
acceptcharset: PropTypes.string,
405415
noValidate: PropTypes.bool,

test/Form_test.js

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2082,7 +2082,7 @@ describeRepeated("Form common", createFormComponent => {
20822082
method: "post",
20832083
target: "_blank",
20842084
action: "/users/list",
2085-
autocomplete: "off",
2085+
autoComplete: "off",
20862086
enctype: "multipart/form-data",
20872087
acceptcharset: "ISO-8859-1",
20882088
noHtml5Validate: true,
@@ -2118,8 +2118,8 @@ describeRepeated("Form common", createFormComponent => {
21182118
expect(node.getAttribute("action")).eql(formProps.action);
21192119
});
21202120

2121-
it("should set attr autoComplete of form", () => {
2122-
expect(node.getAttribute("autocomplete")).eql(formProps.autocomplete);
2121+
it("should set attr autocomplete of form", () => {
2122+
expect(node.getAttribute("autocomplete")).eql(formProps.autoComplete);
21232123
});
21242124

21252125
it("should set attr enctype of form", () => {
@@ -2135,6 +2135,40 @@ describeRepeated("Form common", createFormComponent => {
21352135
});
21362136
});
21372137

2138+
describe("Deprecated autocomplete attribute", () => {
2139+
it("should set attr autocomplete of form", () => {
2140+
const formProps = {
2141+
schema: {},
2142+
autocomplete: "off",
2143+
};
2144+
const node = createFormComponent(formProps).node;
2145+
expect(node.getAttribute("autocomplete")).eql(formProps.autocomplete);
2146+
});
2147+
2148+
it("should log deprecation warning when it is used", () => {
2149+
sandbox.stub(console, "warn");
2150+
createFormComponent({
2151+
schema: {},
2152+
autocomplete: "off",
2153+
});
2154+
expect(
2155+
console.warn.calledWithMatch(
2156+
/Using autocomplete property of Form is deprecated/
2157+
)
2158+
).to.be.true;
2159+
});
2160+
2161+
it("should use autoComplete value if both autocomplete and autoComplete are used", () => {
2162+
const formProps = {
2163+
schema: {},
2164+
autocomplete: "off",
2165+
autoComplete: "on",
2166+
};
2167+
const node = createFormComponent(formProps).node;
2168+
expect(node.getAttribute("autocomplete")).eql(formProps.autoComplete);
2169+
});
2170+
});
2171+
21382172
describe("Custom format updates", () => {
21392173
it("Should update custom formats when customFormats is changed", () => {
21402174
const formProps = {

0 commit comments

Comments
 (0)