fix: coordinate dropdown menus with unified state management and focus handling (#284)

* fix: frontend validation for invite message field

Problem:

Frontend doesn't show validation error when invite message is empty

React Hook Form converts empty strings to undefined for .optional() fields

This causes Zod validation to be skipped

Fix:

Make message field required instead of optional

Add .min(1) validation to reject empty strings

Add .refine() to reject whitespace-only strings

Developer: Zhiqiang Fang <fzq2532@gmail.com>

* refactor: simplify message validation by removing redundant min check

Remove the redundant .min(1) validation since the .refine() with
trim().length > 0 already handles empty string validation properly.

* fix: coordinate dropdown menus with unified state management and focus handling

Implement centralized state management for TextMenu dropdown coordination:
- Add openDropdown state to track which dropdown is currently open
- Create coordinated handlers for each dropdown's open/close events
- Add onCloseAutoFocus to ContentTypePicker for proper focus management

This fixes the issue where multiple dropdowns could be open simultaneously
and transitions from ContentTypePicker to other dropdowns would fail.

Developer: Zhiqiang Fang <fzq2532@gmail.com>

* fix: address code review comments

- Restore original selecting logic (className={selecting ? 'hidden' : ''})
- Remove unnecessary dependencies from useEffect
  - Effect only depends on editor, not openDropdown or selecting
  - Prevents unnecessary listener churn and performance issues

Developer: Zhiqiang Fang <fzq2532@gmail.com>

---------

Co-authored-by: fangzq86 <fangzq86@users.noreply.github.com>

Author: fangzq86

src/components/menus/TextMenu/TextMenu.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import * as Popover from '@radix-ui/react-popover';
 import { Editor } from '@tiptap/react';
 
@@ -19,20 +19,36 @@ import { ColorPicker } from '@/components/panels';
 // 记忆化按钮组件,避免每次编辑器状态变化时重新渲染
 const MemoButton = memo(Toolbar.Button);
 const MemoColorPicker = memo(ColorPicker);
-const MemoFontFamilyPicker = memo(FontFamilyPicker);
-const MemoFontSizePicker = memo(FontSizePicker);
-const MemoContentTypePicker = memo(ContentTypePicker);
 
 export type TextMenuProps = {
   editor: Editor;
 };
 
 export const TextMenu = ({ editor }: TextMenuProps) => {
   const [selecting, setSelecting] = useState(false);
+
+  // 管理哪个下拉菜单是打开的，确保同时只有一个下拉菜单打开
+  const [openDropdown, setOpenDropdown] = useState<'content' | 'fontFamily' | 'fontSize' | null>(
+    null,
+  );
+
   const commands = useTextmenuCommands(editor);
   const states = useTextmenuStates(editor);
   const blockOptions = useTextmenuContentTypes(editor);
 
+  // 处理下拉菜单打开/关闭的协调逻辑
+  const handleContentDropdownOpenChange = useCallback((open: boolean) => {
+    setOpenDropdown(open ? 'content' : null);
+  }, []);
+
+  const handleFontFamilyDropdownOpenChange = useCallback((open: boolean) => {
+    setOpenDropdown(open ? 'fontFamily' : null);
+  }, []);
+
+  const handleFontSizeDropdownOpenChange = useCallback((open: boolean) => {
+    setOpenDropdown(open ? 'fontSize' : null);
+  }, []);
+
   // 监听选区变化,添加短暂延迟以避免菜单闪烁
   useEffect(() => {
     let selectionTimeout: number;
@@ -69,9 +85,23 @@ export const TextMenu = ({ editor }: TextMenuProps) => {
     >
       <Toolbar.Wrapper>
         <Toolbar.Divider />
-        <MemoContentTypePicker options={blockOptions} />
-        <MemoFontFamilyPicker onChange={commands.onSetFont} value={states.currentFont || ''} />
-        <MemoFontSizePicker onChange={commands.onSetFontSize} value={states.currentSize || ''} />
+        <ContentTypePicker
+          options={blockOptions}
+          open={openDropdown === 'content'}
+          onOpenChange={handleContentDropdownOpenChange}
+        />
+        <FontFamilyPicker
+          onChange={commands.onSetFont}
+          value={states.currentFont || ''}
+          open={openDropdown === 'fontFamily'}
+          onOpenChange={handleFontFamilyDropdownOpenChange}
+        />
+        <FontSizePicker
+          onChange={commands.onSetFontSize}
+          value={states.currentSize || ''}
+          open={openDropdown === 'fontSize'}
+          onOpenChange={handleFontSizeDropdownOpenChange}
+        />
         <Toolbar.Divider />
         <MemoButton
           tooltip="Bold"

src/components/menus/TextMenu/components/ContentTypePicker.tsx

@@ -26,6 +26,8 @@ export type ContentPickerOptions = Array<ContentTypePickerOption | ContentTypePi
 
 export type ContentTypePickerProps = {
   options: ContentPickerOptions;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 };
 
 const isOption = (
@@ -35,21 +37,21 @@ const isCategory = (
   option: ContentTypePickerOption | ContentTypePickerCategory,
 ): option is ContentTypePickerCategory => option.type === 'category';
 
-export const ContentTypePicker = ({ options }: ContentTypePickerProps) => {
+export const ContentTypePicker = ({ options, open, onOpenChange }: ContentTypePickerProps) => {
   const activeItem = useMemo(
     () => options.find((option) => option.type === 'option' && option.isActive()),
     [options],
   );
 
   return (
-    <Dropdown.Root>
+    <Dropdown.Root open={open} onOpenChange={onOpenChange} modal={false}>
       <Dropdown.Trigger asChild>
         <Toolbar.Button active={activeItem?.id !== 'paragraph' && !!activeItem?.type}>
           <Icon name={(activeItem?.type === 'option' && activeItem.icon) || 'Pilcrow'} />
           <Icon name="ChevronDown" className="w-2 h-2" />
         </Toolbar.Button>
       </Dropdown.Trigger>
-      <Dropdown.Content asChild>
+      <Dropdown.Content asChild onCloseAutoFocus={(event) => event.preventDefault()}>
         <Surface className="flex flex-col gap-1 px-2 py-4">
           {options.map((option) => {
             if (isOption(option)) {

src/components/menus/TextMenu/components/FontFamilyPicker.tsx

@@ -37,23 +37,30 @@ const FONT_FAMILIES = FONT_FAMILY_GROUPS.flatMap((group) => [group.options]).fla
 export type FontFamilyPickerProps = {
   onChange: (value: string) => void;
   value: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 };
 
-export const FontFamilyPicker = ({ onChange, value }: FontFamilyPickerProps) => {
+export const FontFamilyPicker = ({
+  onChange,
+  value,
+  open,
+  onOpenChange,
+}: FontFamilyPickerProps) => {
   const currentValue = FONT_FAMILIES.find((size) => size.value === value);
   const currentFontLabel = currentValue?.label.split(' ')[0] || 'Inter';
 
   const selectFont = useCallback((font: string) => () => onChange(font), [onChange]);
 
   return (
-    <Dropdown.Root>
+    <Dropdown.Root open={open} onOpenChange={onOpenChange} modal={false}>
       <Dropdown.Trigger asChild>
         <Toolbar.Button active={!!currentValue?.value}>
           {currentFontLabel}
           <Icon name="ChevronDown" className="w-2 h-2" />
         </Toolbar.Button>
       </Dropdown.Trigger>
-      <Dropdown.Content asChild>
+      <Dropdown.Content asChild onCloseAutoFocus={(event) => event.preventDefault()}>
         <Surface className="flex flex-col gap-1 px-2 py-4">
           {FONT_FAMILY_GROUPS.map((group) => (
             <div className="mt-2.5 first:mt-0 gap-0.5 flex flex-col" key={group.label}>

src/components/menus/TextMenu/components/FontSizePicker.tsx

@@ -17,23 +17,25 @@ const FONT_SIZES = [
 export type FontSizePickerProps = {
   onChange: (value: string) => void;
   value: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 };
 
-export const FontSizePicker = ({ onChange, value }: FontSizePickerProps) => {
+export const FontSizePicker = ({ onChange, value, open, onOpenChange }: FontSizePickerProps) => {
   const currentValue = FONT_SIZES.find((size) => size.value === value);
   const currentSizeLabel = currentValue?.label.split(' ')[0] || 'Medium';
 
   const selectSize = useCallback((size: string) => () => onChange(size), [onChange]);
 
   return (
-    <Dropdown.Root>
+    <Dropdown.Root open={open} onOpenChange={onOpenChange} modal={false}>
       <Dropdown.Trigger asChild>
         <Toolbar.Button active={!!currentValue?.value}>
           {currentSizeLabel}
           <Icon name="ChevronDown" className="w-2 h-2" />
         </Toolbar.Button>
       </Dropdown.Trigger>
-      <Dropdown.Content asChild>
+      <Dropdown.Content asChild onCloseAutoFocus={(event) => event.preventDefault()}>
         <Surface className="flex flex-col gap-1 px-2 py-4">
           {FONT_SIZES.map((size) => (
             <DropdownButton