fix(react): allow onBlur and onFocus to be passed to Checkbox without…

… messing up focus state (#1095) Closes #1094 --------- Co-authored-by: Jason <[email protected]>
dequelabs · Jun 21, 2023 · 2dd973a · 2dd973a
1 parent 2d2f1f3
commit 2dd973a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/react/__tests__/src/components/Checkbox/index.js b/packages/react/__tests__/src/components/Checkbox/index.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import sinon from 'sinon';
 import { mount } from 'enzyme';
 import Checkbox from 'src/components/Checkbox';
 import axe from '../../../axe';
@@ -73,15 +74,22 @@ test('handles disabled prop', () => {
 });
 
 test('handles focus/blur', () => {
-  const wrapper = mount(<Checkbox {...defaultProps} />);
+  const onFocus = sinon.spy();
+  const onBlur = sinon.spy();
+
+  const wrapper = mount(
+    <Checkbox {...defaultProps} onFocus={onFocus} onBlur={onBlur} />
+  );
 
   wrapper.find('[type="checkbox"]').simulate('focus');
 
   expect(wrapper.find('.Checkbox__overlay--focused').exists()).toBeTruthy();
+  expect(onFocus.calledOnce).toBe(true);
 
   wrapper.find('[type="checkbox"]').simulate('blur');
 
   expect(wrapper.find('.Checkbox__overlay--focused').exists()).toBeFalsy();
+  expect(onBlur.calledOnce).toBe(true);
 });
 
 test('call onChange when checked state changes', done => {

diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
@@ -31,6 +31,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       checkboxRef,
       className,
       onChange,
+      onFocus,
+      onBlur,
       'aria-describedby': ariaDescribedby,
       disabled = false,
       checked = false,
@@ -77,8 +79,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             type="checkbox"
             checked={isChecked}
             disabled={disabled}
-            onFocus={(): void => setFocused(true)}
-            onBlur={(): void => setFocused(false)}
+            onFocus={(e): void => {
+              setFocused(true);
+              if (typeof onFocus === 'function') {
+                onFocus(e);
+              }
+            }}
+            onBlur={(e): void => {
+              setFocused(false);
+              if (typeof onBlur === 'function') {
+                onBlur(e);
+              }
+            }}
             aria-describedby={ariaDescribedbyId}
             onChange={(e): void => {
               setIsChecked(e.target.checked);