From 4a7abc15f597552e54f887e753144798c95a18b4 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 7 Apr 2024 09:55:06 -0400
Subject: [PATCH] Fix #6288: MultiSelect focus checkbox on focus of list item

---
 components/lib/multiselect/MultiSelectItem.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index d8ad24ad01..36d073c371 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
 import { useMergeProps } from '../hooks/Hooks';
 import { CheckIcon } from '../icons/check';
 import { Ripple } from '../ripple/Ripple';
-import { Checkbox } from '../checkbox/Checkbox';
 import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 
 export const MultiSelectItem = React.memo((props) => {
     const [focusedState, setFocusedState] = React.useState(false);
+    const checkboxRef = React.useRef(null);
     const mergeProps = useMergeProps();
     const { ptm, cx, isUnstyled } = props;
 
@@ -25,6 +26,7 @@ export const MultiSelectItem = React.memo((props) => {
 
     const onFocus = (event) => {
         setFocusedState(true);
+        checkboxRef?.current?.getInput().focus();
     };
 
     const onBlur = (event) => {
@@ -80,7 +82,7 @@ export const MultiSelectItem = React.memo((props) => {
     return (
         <li {...itemProps}>
             <div {...checkboxContainerProps}>
-                <Checkbox checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
+                <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} />
             </div>
             <span>{content}</span>
             <Ripple />