From a21e9d9473cba3cd63f2f473a29e8863480b072b Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Wed, 10 Jul 2024 07:53:57 +0530
Subject: [PATCH] fix: remove focus on unselecting the checkbox

affects: @medly-components/core, @medly-components/forms
---
 packages/core/src/components/Accordion/types.ts    | 2 +-
 packages/core/src/components/Checkbox/Checkbox.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/Accordion/types.ts b/packages/core/src/components/Accordion/types.ts
index 99bd2376d..d4cf0d254 100644
--- a/packages/core/src/components/Accordion/types.ts
+++ b/packages/core/src/components/Accordion/types.ts
@@ -12,7 +12,7 @@ export type AccordionContextType = [
     Dispatch<SetStateAction<boolean>> /** Function to be called to toggle the active state */
 ];
 
-export type AccordionProps = {
+export type AccordionProps = Omit<HTMLProps<HTMLDivElement>, 'onChange'> & {
     /** Use to render any component as Button */
     as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /** Set it true to open the accordion by default */
diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/packages/core/src/components/Checkbox/Checkbox.tsx
index efef6d12c..14446248e 100644
--- a/packages/core/src/components/Checkbox/Checkbox.tsx
+++ b/packages/core/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon, MinimizeIcon } from '@medly-components/icons';
-import { isValidStringOrNumber, useCombinedRefs, useKeyPress, WithStyle } from '@medly-components/utils';
+import { WithStyle, isValidStringOrNumber, useCombinedRefs, useKeyPress } from '@medly-components/utils';
 import { ChangeEvent, FC, FocusEvent, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SelectorLabel } from '../Selectors';
 import * as Styled from './Checkbox.styled';
@@ -51,7 +51,10 @@ const Component: FC<CheckboxProps> = memo(
                 [validate, props.onInvalid]
             ),
             onChange = useCallback(
-                (event: ChangeEvent<HTMLInputElement>) => validate(event, props.onChange, false),
+                (event: ChangeEvent<HTMLInputElement>) => {
+                    validate(event, props.onChange, false);
+                    !event.target.checked && event.target.blur();
+                },
                 [validate, props.onChange]
             );