Added form readonly prop (#2553) (#2554)

* Added form readonly prop (#2552)

Updated the playground to add the `Readonly whole form` flag
Added the `form-readonly` section in the documentation
Updated the tests to verify the `read-only` status

* Fix test

* - Updated the Typescript type for the `FormProps` to add `readonly`

* - Updated the `CHANGELOG.md` in preparation for release

* - Updated test to verify the nesting of readonly works as expected

CHANGELOG.md

@@ -21,6 +21,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/core
 - Fix for clearing errors after updating and submitting form (https://github.com/rjsf-team/react-jsonschema-form/pull/2536)
 - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519)
+- Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554)
 
 ## @rjsf/bootstrap-4
 - bootstrap-4 TextWidget wrappers now pull from registry, add rootSchema to Registry, fix FieldProps.onFocus type to match WidgetProps (https://github.com/rjsf-team/react-jsonschema-form/pull/2519)
@@ -30,6 +31,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## Dev / docs / playground
 - Several dependency updates
+- Added global `readonly` flag to the `Form` (https://github.com/rjsf-team/react-jsonschema-form/pull/2554)
 
 # v3.1.0
 

docs/api-reference/form-props.md

@@ -72,6 +72,23 @@ render((
 
 If you just want to disable some of the fields, see the `ui:disabled` parameter in `uiSchema`.
 
+## readonly
+
+It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.
+
+```jsx
+const schema = {
+  type: "string"
+};
+
+render((
+  <Form schema={schema}
+        readonly />
+), document.getElementById("app"));
+```
+
+If you just want to make some of the fields read-only, see the `ui:readonly` parameter in `uiSchema`.
+
 ## enctype
 
 The value of this prop will be passed to the `enctype` [HTML attribute on the form](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype).

packages/core/index.d.ts

@@ -19,6 +19,7 @@ declare module '@rjsf/core' {
         className?: string;
         customFormats?: { [k: string]: string | RegExp | ((data: string) => boolean) };
         disabled?: boolean;
+        readonly?: boolean;
         enctype?: string;
         extraErrors?: any;
         ErrorList?: React.StatelessComponent<ErrorListProps>;

packages/core/src/components/Form.js

@@ -24,6 +24,7 @@ export default class Form extends Component {
     noValidate: false,
     liveValidate: false,
     disabled: false,
+    readonly: false,
     noHtml5Validate: false,
     ErrorList: DefaultErrorList,
     omitExtraData: false,
@@ -438,6 +439,7 @@ export default class Form extends Component {
       acceptcharset,
       noHtml5Validate,
       disabled,
+      readonly,
       formContext,
     } = this.props;
 
@@ -484,6 +486,7 @@ export default class Form extends Component {
           onFocus={this.onFocus}
           registry={registry}
           disabled={disabled}
+          readonly={readonly}
         />
         {children ? (
           children
@@ -504,6 +507,8 @@ if (process.env.NODE_ENV !== "production") {
     schema: PropTypes.object.isRequired,
     uiSchema: PropTypes.object,
     formData: PropTypes.any,
+    disabled: PropTypes.bool,
+    readonly: PropTypes.bool,
     widgets: PropTypes.objectOf(
       PropTypes.oneOfType([PropTypes.func, PropTypes.object])
     ),

packages/core/test/Form_test.js

@@ -2226,6 +2226,33 @@ describeRepeated("Form common", createFormComponent => {
     });
   });
 
+  describe("Form readonly prop", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        foo: { type: "string" },
+        bar: { type: "object", properties: { baz: { type: "string" } } },
+      },
+    };
+    const formData = { foo: "foo", bar: { baz: "baz" } };
+
+    it("should not have any readonly items", () => {
+      const { node } = createFormComponent({ schema, formData });
+
+      expect(node.querySelectorAll("input:read-only")).to.have.length.of(0);
+    });
+
+    it("should readonly all items", () => {
+      const { node } = createFormComponent({
+        schema,
+        formData,
+        readonly: true,
+      });
+
+      expect(node.querySelectorAll("input:read-only")).to.have.length.of(2);
+    });
+  });
+
   describe("Attributes", () => {
     const formProps = {
       schema: {},

packages/playground/src/app.js

@@ -100,6 +100,7 @@ const liveSettingsSchema = {
   properties: {
     validate: { type: "boolean", title: "Live validation" },
     disable: { type: "boolean", title: "Disable whole form" },
+    readonly: { type: "boolean", title: "Readonly whole form" },
     omitExtraData: { type: "boolean", title: "Omit extra data" },
     liveOmit: { type: "boolean", title: "Live omit" },
   },
@@ -355,6 +356,7 @@ class Playground extends Component {
       liveSettings: {
         validate: false,
         disable: false,
+        readonly: false,
         omitExtraData: false,
         liveOmit: false,
       },
@@ -599,6 +601,7 @@ class Playground extends Component {
                 {...templateProps}
                 liveValidate={liveSettings.validate}
                 disabled={liveSettings.disable}
+                readonly={liveSettings.readonly}
                 omitExtraData={liveSettings.omitExtraData}
                 liveOmit={liveSettings.liveOmit}
                 schema={schema}