diff --git a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx b/libs/components/editor-blocks/src/blocks/code/CodeView.tsx index 97f3c3bd83..b59dd73261 100644 --- a/libs/components/editor-blocks/src/blocks/code/CodeView.tsx +++ b/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(); const [showOperationPanel, setShowOperationPanel] = useState(false); + const [selectOpen, setSelectOpen] = useState(false); const isSelecting = useRef(false); const codeMirror = useRef(); 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 ( diff --git a/libs/components/ui/src/select/Select.tsx b/libs/components/ui/src/select/Select.tsx index f43452edea..9012e2358e 100644 --- a/libs/components/ui/src/select/Select.tsx +++ b/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( props: ExtendSelectProps & SelectUnstyledProps, ref: ForwardedRef ) { - const [isOpen, setIsOpen] = useState(false); const { width = '100%', style, @@ -48,7 +48,11 @@ export const Select = forwardRef(function CustomSelect( placeholder, onListboxOpenChange, onChange, + open: propsOpen, } = props; + const openControlledByProps = propsOpen !== undefined; + const [isOpen, setIsOpen] = useState(false); + const components: SelectUnstyledProps['components'] = { // Root: generateStyledRoot({ width, ...style }), Root: forwardRef((rootProps, rootRef) => { @@ -88,13 +92,13 @@ export const Select = forwardRef(function CustomSelect( return ( { - setIsOpen(open); + !openControlledByProps && setIsOpen(open); onListboxOpenChange?.(open); }} onChange={v => { - setIsOpen(false); + !openControlledByProps && setIsOpen(false); onChange?.(v); }} ref={ref}