From f4583f9acdbf188c7424181c3681d1397beb8661 Mon Sep 17 00:00:00 2001
From: Andrew <andseier@gmail.com>
Date: Thu, 9 Nov 2017 13:39:15 -0800
Subject: [PATCH] fix: Pass `disabled` prop to `FieldTemplate`. (#741)

If you want to change how your FieldTemplate is rendered based on
ui:disabled, you currently have to check `uiSchema["ui:disabled"]`,
which is unlike the pattern for `readonly` and other known `ui:*`
settings.
---
 README.md                            |  1 +
 src/components/fields/SchemaField.js |  1 +
 test/FieldTemplate_test.js           | 40 ++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 test/FieldTemplate_test.js

diff --git a/README.md b/README.md
index 4419e60ff5..ecf859c256 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 <div className={props.disabled ? "disabled" : "foo"} />;
+    }
+
+    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);
+    });
+  });
+});