Optimize the event handling and rendering logic of the component picker (#19232)

This commit is contained in:
allenZhang 2025-05-06 09:48:53 +08:00 committed by GitHub
parent c5568f756f
commit 5a6f20d575
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -120,10 +120,8 @@ const ComponentPicker = ({
}, [editor, checkForTriggerMatch, triggerString]) }, [editor, checkForTriggerMatch, triggerString])
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
ReactDOM.flushSync(() => {
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' }) const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent) editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
})
}, [editor]) }, [editor])
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>(( const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
@ -132,7 +130,11 @@ const ComponentPicker = ({
) => { ) => {
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show))) if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
return null return null
setTimeout(() => {
if (anchorElementRef.current)
refs.setReference(anchorElementRef.current) refs.setReference(anchorElementRef.current)
}, 0)
return ( return (
<> <>
@ -149,7 +151,6 @@ const ComponentPicker = ({
visibility: isPositioned ? 'visible' : 'hidden', visibility: isPositioned ? 'visible' : 'hidden',
}} }}
ref={refs.setFloating} ref={refs.setFloating}
data-testid="component-picker-container"
> >
{ {
workflowVariableBlock?.show && ( workflowVariableBlock?.show && (
@ -173,7 +174,7 @@ const ComponentPicker = ({
<div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div> <div className='my-1 h-px w-full -translate-x-1 bg-divider-subtle'></div>
) )
} }
<div data-testid="options-list"> <div>
{ {
options.map((option, index) => ( options.map((option, index) => (
<Fragment key={option.key}> <Fragment key={option.key}>