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

web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx

@@ -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}>