diff --git a/README.md b/README.md index b0faf4d32f..6d4b6c0a31 100644 --- a/README.md +++ b/README.md @@ -849,6 +849,7 @@ The following props are passed to a custom field template component: - `hidden`: A boolean value stating if the field should be hidden. - `required`: A boolean value stating if the field is required. - `readonly`: A boolean value stating if the field is read-only. +- `disabled`: A boolean value stating if the field is disabled. - `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI. - `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields. - `schema`: The schema object for this field. diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js index 6ab79bb664..4c9b109cb7 100644 --- a/src/components/fields/SchemaField.js +++ b/src/components/fields/SchemaField.js @@ -244,6 +244,7 @@ function SchemaFieldRender(props) { label, hidden, required, + disabled, readonly, displayLabel, classNames, diff --git a/test/FieldTemplate_test.js b/test/FieldTemplate_test.js new file mode 100644 index 0000000000..cd6d288b5b --- /dev/null +++ b/test/FieldTemplate_test.js @@ -0,0 +1,40 @@ +import React from "react"; + +import { expect } from "chai"; +import { createFormComponent, createSandbox } from "./test_utils"; + +describe("FieldTemplate", () => { + let sandbox; + + beforeEach(() => { + sandbox = createSandbox(); + }); + + afterEach(() => { + sandbox.restore(); + }); + + describe("Custom FieldTemplate for disabled property", () => { + function FieldTemplate(props) { + return
; + } + + it("should render with disabled when ui:disabled is truthy", () => { + const { node } = createFormComponent({ + schema: { type: "string" }, + uiSchema: { "ui:disabled": true }, + FieldTemplate, + }); + expect(node.querySelectorAll(".disabled")).to.have.length.of(1); + }); + + it("should render with disabled when ui:disabled is falsey", () => { + const { node } = createFormComponent({ + schema: { type: "string" }, + uiSchema: { "ui:disabled": false }, + FieldTemplate, + }); + expect(node.querySelectorAll(".disabled")).to.have.length.of(0); + }); + }); +});