Merge pull request #438 from toeverything/fix/bugs

fix: close select popover after mouse leave code block

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -153,6 +153,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
     const langType: string = block.getProperty('lang');
     const [extensions, setExtensions] = useState<Extension[]>();
     const [showOperationPanel, setShowOperationPanel] = useState(false);
+    const [selectOpen, setSelectOpen] = useState(false);
     const isSelecting = useRef(false);
     const codeMirror = useRef<ReactCodeMirrorRef>();
     const focusCode = () => {
@@ -197,6 +198,7 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                     setShowOperationPanel(true);
                 }}
                 onMouseLeave={() => {
+                    setSelectOpen(false);
                     !isSelecting.current && setShowOperationPanel(false);
                 }}
             >
@@ -210,9 +212,11 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
                             onChange={(selectedValue: string) => {
                                 handleLangChange(selectedValue);
                             }}
-                            onListboxOpenChange={() => {
+                            onListboxOpenChange={open => {
+                                setSelectOpen(open);
                                 isSelecting.current = true;
                             }}
+                            open={selectOpen}
                         >
                             {Object.keys(langs).map(item => {
                                 return (

libs/components/ui/src/select/Select.tsx

@@ -5,6 +5,7 @@ import {
     type ForwardedRef,
     type ReactNode,
     type RefAttributes,
+    useEffect,
 } from 'react';
 /* eslint-disable no-restricted-imports */
 import SelectUnstyled, {
@@ -15,13 +16,13 @@ import SelectUnstyled, {
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { ArrowDropDownIcon } from '@toeverything/components/icons';
 import { styled } from '../styled';
-
 type ExtendSelectProps = {
     // Width is always used custom, it will be set to root button and popover
     width?: number | string;
     style?: CSSProperties;
     listboxStyle?: CSSProperties;
     placeholder?: ReactNode;
+    open?: boolean;
 };
 
 /**
@@ -40,7 +41,6 @@ export const Select = forwardRef(function CustomSelect<TValue>(
     props: ExtendSelectProps & SelectUnstyledProps<TValue>,
     ref: ForwardedRef<HTMLUListElement>
 ) {
-    const [isOpen, setIsOpen] = useState(false);
     const {
         width = '100%',
         style,
@@ -48,7 +48,11 @@ export const Select = forwardRef(function CustomSelect<TValue>(
         placeholder,
         onListboxOpenChange,
         onChange,
+        open: propsOpen,
     } = props;
+    const openControlledByProps = propsOpen !== undefined;
+    const [isOpen, setIsOpen] = useState(false);
+
     const components: SelectUnstyledProps<TValue>['components'] = {
         // Root: generateStyledRoot({ width, ...style }),
         Root: forwardRef((rootProps, rootRef) => {
@@ -88,13 +92,13 @@ export const Select = forwardRef(function CustomSelect<TValue>(
     return (
         <SelectUnstyled
             {...props}
-            listboxOpen={isOpen}
+            listboxOpen={openControlledByProps ? propsOpen : isOpen}
             onListboxOpenChange={open => {
-                setIsOpen(open);
+                !openControlledByProps && setIsOpen(open);
                 onListboxOpenChange?.(open);
             }}
             onChange={v => {
-                setIsOpen(false);
+                !openControlledByProps && setIsOpen(false);
                 onChange?.(v);
             }}
             ref={ref}