Add onBlur and onFocus events for radio and checkbox widgets (#1143)

* fix: add onBlur and onFocus events for radio and checkbox widgets * fix: use event.target.checked instead of event.target.value for checkbox
rjsf-team · Feb 7, 2019 · 1e2c7e3 · 1e2c7e3
1 parent 723aa24
commit 1e2c7e3
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 0 deletions.
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}`} />;