Merge pull request #3251 from udecode/fix/floatingt

fix: turn-into-dropdown-menu losing focus
udecode · Jun 7, 2024 · b195c05 · b195c05
2 parents 9a5405e + 77e568b
commit b195c05
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/.changeset/cuddly-onions-relax.md b/.changeset/cuddly-onions-relax.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-floating": patch
+---
+
+fix: can't open dropdown menu
diff --git a/.changeset/fluffy-rabbits-argue.md b/.changeset/fluffy-rabbits-argue.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-mention": patch
+---
+
+fix: import types form `@udecode/common` instead of `@udecode/common/server`
diff --git a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx
@@ -132,6 +132,13 @@ export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) {
     items.find((item) => item.value === value) ?? defaultItem;
   const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;
 
+  const onCloseAutoFocus = React.useCallback((e: Event) => {
+    focusEditor(editor);
+
+    return e.preventDefault();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <DropdownMenu modal={false} {...openState} {...props}>
       <DropdownMenuTrigger asChild>
@@ -146,7 +153,11 @@ export function PlaygroundTurnIntoDropdownMenu(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" className="min-w-0">
+      <DropdownMenuContent
+        align="start"
+        className="min-w-0"
+        onCloseAutoFocus={onCloseAutoFocus}
+      >
         <DropdownMenuLabel>Turn into</DropdownMenuLabel>
 
         <DropdownMenuRadioGroup

diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts
@@ -116,12 +116,7 @@ export const useFloatingToolbar = ({
   }, [selectionText, selectionExpanded, setMouseupped]);
 
   React.useEffect(() => {
-    if (
-      !selectionExpanded ||
-      !selectionText ||
-      // (!(editorId === focusedEditorId || ignoreReadOnly) && hideToolbar)
-      !(editorId === focusedEditorId)
-    ) {
+    if (!selectionExpanded || !selectionText) {
       setOpen(false);
       setMouseupped(false);
     } else if (

diff --git a/packages/mention/src/types.ts b/packages/mention/src/types.ts
@@ -1,5 +1,5 @@
 import type { TriggerComboboxPlugin } from '@udecode/plate-combobox';
-import type { TElement, TNodeProps } from '@udecode/plate-common/server';
+import type { TElement, TNodeProps } from '@udecode/plate-common';
 
 export interface TMentionItemBase {
   text: string;