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])
const handleClose = useCallback(() => {
ReactDOM.flushSync(() => {
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
})
const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' })
editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
}, [editor])
const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
@ -132,7 +130,11 @@ const ComponentPicker = ({
) => {
if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
return null
refs.setReference(anchorElementRef.current)
setTimeout(() => {
if (anchorElementRef.current)
refs.setReference(anchorElementRef.current)
}, 0)
return (
<>
@ -149,7 +151,6 @@ const ComponentPicker = ({
visibility: isPositioned ? 'visible' : 'hidden',
}}
ref={refs.setFloating}
data-testid="component-picker-container"
>
{
workflowVariableBlock?.show && (
@ -173,7 +174,7 @@ const ComponentPicker = ({
<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) => (
<Fragment key={option.key}>