diff --git a/src/components/widgets/CheckboxWidget.js b/src/components/widgets/CheckboxWidget.js index 0a87532efe..f583f5e7a4 100644 --- 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))} /> {label} diff --git a/src/components/widgets/RadioWidget.js b/src/components/widgets/RadioWidget.js index 962fc069bb..8bd7dcf8c0 100644 --- 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))} /> {option.label} diff --git a/test/BooleanField_test.js b/test/BooleanField_test.js index 57cfa11591..ea9d43b7a6 100644 --- 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 =>
;