fix(ui-kit): fix Select multiple clicks

packages/ui-kit/src/components/Select/Select.tsx

@@ -3,6 +3,7 @@ import { SelectOptionDefinition, SelectProvider, useSelect } from '@mui/base/use
 import { prepareForSlot } from '@mui/base/utils'
 import classNames from 'classnames'
 import * as React from 'react'
+import { useCombinedRefsCallback } from '../../helpers'
 import { Button, ButtonProps } from '../Button'
 import { ChevronDownIcon } from '../Icons/ChevronDown'
 import { Option, OptionValue } from './Option'
@@ -32,6 +33,8 @@ const SelectComponent = <T extends OptionValue>(
   }: SelectProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
 ) => {
+  const innerRef = React.useRef<HTMLButtonElement>(null)
+  const { setRef, ref } = useCombinedRefsCallback({ forwardedRef, innerRef })
   const popperRef = React.useRef<HTMLDivElement>(null)
   const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
   const [listboxVisible, setListboxVisible] = React.useState(listboxOpen)
@@ -75,17 +78,23 @@ const SelectComponent = <T extends OptionValue>(
 
   const listbox = getListboxProps()
   // Prevent a weird behavior when select is nested in another select
-  listbox.onBlur = React.useCallback((event: React.FocusEvent<HTMLElement>) => {
-    if (!popperRef.current?.contains(event.relatedTarget)) {
-      setTimeout(() => {
-        setListboxVisible(false)
-      }, 100)
-    }
-  }, [])
+  listbox.onBlur = React.useCallback(
+    (event: React.FocusEvent<HTMLElement>) => {
+      if (ref?.current === event.relatedTarget) {
+        return
+      }
+      if (!popperRef.current?.contains(event.relatedTarget)) {
+        setTimeout(() => {
+          setListboxVisible(false)
+        }, 100)
+      }
+    },
+    [ref]
+  )
 
   return (
     <MUISelect<T, false>
-      ref={forwardedRef}
+      ref={setRef}
       value={value}
       className={classNames(componentStyles.rootSelect, className)}
       {...rest}