Merge branch 'master' of https://github.com/mozilla-services/react-js…

…onschema-form
rjsf-team · Jan 21, 2019 · 8db0f3b · 8db0f3b
2 parents 9fdab86 + 3f35d78
commit 8db0f3b
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -202,6 +202,7 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
  - Custom errors messages with transformErrors: <https://jsfiddle.net/revolunet/5r3swnr4/>
  - 2 columns form with CSS and FieldTemplate: <https://jsfiddle.net/n1k0/bw0ffnz4/1/>
  - Validate and submit form from external control: <https://jsfiddle.net/spacebaboon/g5a1re63/>
+ - Custom component for Help text with `ui:help`: <https://codesandbox.io/s/14pqx97xl7/>
 
 ## Contributing
 

diff --git a/src/components/widgets/CheckboxWidget.js b/src/components/widgets/CheckboxWidget.js
@@ -12,6 +12,8 @@ function CheckboxWidget(props) {
     readonly,
     label,
     autofocus,
+    onBlur,
+    onFocus,
     onChange,
   } = props;
   return (
@@ -28,6 +30,8 @@ function CheckboxWidget(props) {
           disabled={disabled || readonly}
           autoFocus={autofocus}
           onChange={event => onChange(event.target.checked)}
+          onBlur={onBlur && (event => onBlur(id, event.target.checked))}
+          onFocus={onFocus && (event => onFocus(id, event.target.checked))}
         />
         <span>{label}</span>
       </label>

diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js
@@ -9,6 +9,8 @@ function RadioWidget(props) {
     disabled,
     readonly,
     autofocus,
+    onBlur,
+    onFocus,
     onChange,
     id,
   } = props;
@@ -36,6 +38,8 @@ function RadioWidget(props) {
               disabled={disabled || itemDisabled || readonly}
               autoFocus={autofocus && i === 0}
               onChange={_ => onChange(option.value)}
+              onBlur={onBlur && (event => onBlur(id, event.target.value))}
+              onFocus={onFocus && (event => onFocus(id, event.target.value))}
             />
             <span>{option.label}</span>
           </span>

diff --git a/test/BooleanField_test.js b/test/BooleanField_test.js
@@ -245,6 +245,50 @@ describe("BooleanField", () => {
     expect(node.querySelectorAll(".radio-inline")).to.have.length.of(2);
   });
 
+  it("should handle a focus event for radio widgets", () => {
+    const onFocus = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "radio",
+      },
+      onFocus,
+    });
+
+    const element = node.querySelector(".field-radio-group");
+    Simulate.focus(node.querySelector("input"), {
+      target: {
+        value: false,
+      },
+    });
+    expect(onFocus.calledWith(element.id, false)).to.be.true;
+  });
+
+  it("should handle a blur event for radio widgets", () => {
+    const onBlur = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "radio",
+      },
+      onBlur,
+    });
+
+    const element = node.querySelector(".field-radio-group");
+    Simulate.blur(node.querySelector("input"), {
+      target: {
+        value: false,
+      },
+    });
+    expect(onBlur.calledWith(element.id, false)).to.be.true;
+  });
+
   it("should support enumNames for select", () => {
     const { node } = createFormComponent({
       schema: {
@@ -262,6 +306,50 @@ describe("BooleanField", () => {
     expect(labels).eql(["", "Yes", "No"]);
   });
 
+  it("should handle a focus event with checkbox", () => {
+    const onFocus = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "select",
+      },
+      onFocus,
+    });
+
+    const element = node.querySelector("select");
+    Simulate.focus(element, {
+      target: {
+        value: false,
+      },
+    });
+    expect(onFocus.calledWith(element.id, false)).to.be.true;
+  });
+
+  it("should handle a blur event with select", () => {
+    const onBlur = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "select",
+      },
+      onBlur,
+    });
+
+    const element = node.querySelector("select");
+    Simulate.blur(element, {
+      target: {
+        value: false,
+      },
+    });
+    expect(onBlur.calledWith(element.id, false)).to.be.true;
+  });
+
   it("should render the widget with the expected id", () => {
     const { node } = createFormComponent({
       schema: {
@@ -285,6 +373,50 @@ describe("BooleanField", () => {
     expect(node.querySelector("#custom")).to.exist;
   });
 
+  it("should handle a focus event with checkbox", () => {
+    const onFocus = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "checkbox",
+      },
+      onFocus,
+    });
+
+    const element = node.querySelector("input");
+    Simulate.focus(element, {
+      target: {
+        checked: false,
+      },
+    });
+    expect(onFocus.calledWith(element.id, false)).to.be.true;
+  });
+
+  it("should handle a blur event with checkbox", () => {
+    const onBlur = sandbox.spy();
+    const { node } = createFormComponent({
+      schema: {
+        type: "boolean",
+        default: false,
+      },
+      uiSchema: {
+        "ui:widget": "checkbox",
+      },
+      onBlur,
+    });
+
+    const element = node.querySelector("input");
+    Simulate.blur(element, {
+      target: {
+        checked: false,
+      },
+    });
+    expect(onBlur.calledWith(element.id, false)).to.be.true;
+  });
+
   describe("Label", () => {
     const Widget = props => <div id={`label-${props.label}`} />;