@tuturuuu/ui 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [0.11.1](https://github.com/tutur3u/platform/compare/ui-v0.11.0...ui-v0.11.1) (2026-07-02)
+
+
+### Bug Fixes
+
+* **cli:** preserve markdown tables in task descriptions ([9faf8ba](https://github.com/tutur3u/platform/commit/9faf8ba44b92565a9dfc2949c496654fc1fea9b3))
+* **tasks:** refresh task template placeholders ([0c3c309](https://github.com/tutur3u/platform/commit/0c3c30935f67e3e64d548c8a13584fd597e887b8))
+* **ui:** stabilize task property popover handoff ([8fb2e62](https://github.com/tutur3u/platform/commit/8fb2e62904d34a3ae7894bfbbb66c285fcf1a1bd))
+
 ## [0.11.0](https://github.com/tutur3u/platform/compare/ui-v0.10.0...ui-v0.11.0) (2026-06-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,42 +24,42 @@
     "@hookform/resolvers": "^5.4.0",
     "@json-render/core": "^0.19.0",
     "@json-render/react": "^0.19.0",
-    "@radix-ui/react-accordion": "^1.2.14",
-    "@radix-ui/react-alert-dialog": "^1.1.17",
-    "@radix-ui/react-aspect-ratio": "^1.1.10",
-    "@radix-ui/react-avatar": "^1.2.0",
-    "@radix-ui/react-checkbox": "^1.3.5",
-    "@radix-ui/react-collapsible": "^1.1.14",
-    "@radix-ui/react-context-menu": "^2.3.1",
-    "@radix-ui/react-dialog": "^1.1.17",
-    "@radix-ui/react-dropdown-menu": "^2.1.18",
-    "@radix-ui/react-hover-card": "^1.1.17",
-    "@radix-ui/react-label": "^2.1.10",
-    "@radix-ui/react-menubar": "^1.1.18",
-    "@radix-ui/react-navigation-menu": "^1.2.16",
-    "@radix-ui/react-popover": "^1.1.17",
-    "@radix-ui/react-progress": "^1.1.10",
-    "@radix-ui/react-radio-group": "^1.4.1",
-    "@radix-ui/react-scroll-area": "^1.2.12",
-    "@radix-ui/react-select": "^2.3.1",
-    "@radix-ui/react-separator": "^1.1.10",
-    "@radix-ui/react-slider": "^1.4.1",
+    "@radix-ui/react-accordion": "^1.2.15",
+    "@radix-ui/react-alert-dialog": "^1.1.18",
+    "@radix-ui/react-aspect-ratio": "^1.1.11",
+    "@radix-ui/react-avatar": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.3.6",
+    "@radix-ui/react-collapsible": "^1.1.15",
+    "@radix-ui/react-context-menu": "^2.3.2",
+    "@radix-ui/react-dialog": "^1.1.18",
+    "@radix-ui/react-dropdown-menu": "^2.1.19",
+    "@radix-ui/react-hover-card": "^1.1.18",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-menubar": "^1.1.19",
+    "@radix-ui/react-navigation-menu": "^1.2.17",
+    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-progress": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.4.2",
+    "@radix-ui/react-scroll-area": "^1.2.13",
+    "@radix-ui/react-select": "^2.3.2",
+    "@radix-ui/react-separator": "^1.1.11",
+    "@radix-ui/react-slider": "^1.4.2",
     "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.1",
-    "@radix-ui/react-tabs": "^1.1.15",
-    "@radix-ui/react-toast": "^1.2.17",
-    "@radix-ui/react-toggle": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.10",
+    "@radix-ui/react-switch": "^1.3.2",
+    "@radix-ui/react-tabs": "^1.1.16",
+    "@radix-ui/react-toast": "^1.2.18",
+    "@radix-ui/react-toggle": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.11",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.3",
+    "@tanstack/react-virtual": "^3.14.5",
     "@tiptap/core": "3.27.1",
     "@tiptap/extension-collaboration": "3.27.1",
     "@tiptap/extension-collaboration-caret": "3.27.1",
@@ -88,9 +88,9 @@
     "@tuturuuu/apis": "0.7.0",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.12.0",
+    "@tuturuuu/internal-api": "0.13.0",
     "@tuturuuu/supabase": "0.4.0",
-    "@tuturuuu/utils": "0.11.0",
+    "@tuturuuu/utils": "0.12.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -102,18 +102,18 @@
     "debug": "^4.4.3",
     "embla-carousel-react": "^8.6.0",
     "eventemitter3": "^5.0.4",
-    "framer-motion": "^12.41.0",
+    "framer-motion": "^12.42.2",
     "gsap": "^3.15.0",
-    "html2canvas-pro": "^2.1.1",
+    "html2canvas-pro": "^2.2.1",
     "input-otp": "^1.4.2",
     "katex": "^0.17.0",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
-    "motion": "^12.41.0",
-    "next": "^16.2.9",
-    "next-intl": "^4.13.0",
+    "motion": "^12.42.2",
+    "next": "^16.3.0-preview.5",
+    "next-intl": "^4.13.1",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.8.9",
+    "nuqs": "^2.9.0",
     "prosemirror-state": "^1.4.4",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
@@ -126,9 +126,9 @@
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.4.1",
     "react-resizable": "^4.0.2",
-    "react-resizable-panels": "^4.11.0",
+    "react-resizable-panels": "^4.12.0",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "3.9.0",
+    "recharts": "3.9.1",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-scrollbar": "^4.0.2",
@@ -143,34 +143,34 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/postcss": "^4.3.2",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.13.0",
+    "@tuturuuu/types": "0.13.1",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "autoprefixer": "^10.5.0",
+    "autoprefixer": "^10.5.2",
     "jsdom": "^29.1.1",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.16",
     "postcss-load-config": "^6.0.1",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.2",
     "typescript": "7.0.1-rc",
     "uuid": "^14.0.1",
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3"
   },
   "exports": {

package/src/components/ui/text-editor/__tests__/extensions.test.ts

@@ -1,5 +1,6 @@
 import { generateHTML, generateJSON } from '@tiptap/core';
 import type SupabaseProvider from '@tuturuuu/ui/hooks/supabase-provider';
+import { parseTaskDescriptionInput } from '@tuturuuu/utils/task-description-codec';
 import { describe, expect, it } from 'vitest';
 import * as Y from 'yjs';
 import { getEditorExtensions } from '../extensions';
@@ -157,6 +158,27 @@ describe('text editor extensions', () => {
     expect(html).toContain('#FFF59D');
   });
 
+  it('renders shared markdown-codec table JSON with editor table extensions', () => {
+    const extensions = getEditorExtensions({ readOnly: true });
+    const content = parseTaskDescriptionInput(
+      ['| Field | Value |', '| --- | --- |', '| Owner | Platform |'].join('\n'),
+      'markdown'
+    );
+
+    const html = generateHTML(content, extensions);
+
+    expect(html).toContain('<table');
+    expect(html).toContain('<th');
+    expect(html).toContain('<td');
+    expect(html).toContain('Platform');
+
+    const parsed = generateJSON(html, extensions);
+    expect(parsed.content?.[0]?.type).toBe('table');
+    expect(parsed.content?.[0]?.content?.[0]?.content?.[0]?.type).toBe(
+      'tableHeader'
+    );
+  });
+
   it('round-trips task mention workspace metadata through HTML attrs', () => {
     const renderOutput = (Mention.config as any).renderHTML({
       HTMLAttributes: {

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-list-selector.tsx

@@ -5,7 +5,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { type ComponentProps, useMemo, useState } from 'react';
 import { CreateListDialog } from '../../create-list-dialog';
 import { translateTaskListNameForDisplay } from '../../utils/translate-task-list-display-name';
 import { TaskListPickerPanel } from './task-list-picker-panel';
@@ -23,7 +23,14 @@ interface TaskListSelectorProps {
   compact?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  onPopoverCloseAutoFocus?: ComponentProps<
+    typeof PopoverContent
+  >['onCloseAutoFocus'];
+  onPopoverInteractOutside?: ComponentProps<
+    typeof PopoverContent
+  >['onInteractOutside'];
   onListChange: (listId: string) => void;
+  propertyPopoverId?: string;
 }
 
 export function TaskListSelector({
@@ -35,7 +42,10 @@ export function TaskListSelector({
   compact = false,
   open,
   onOpenChange,
+  onPopoverCloseAutoFocus,
+  onPopoverInteractOutside,
   onListChange,
+  propertyPopoverId,
 }: TaskListSelectorProps) {
   const t = useTranslations();
   const [uncontrolledPopoverOpen, setUncontrolledPopoverOpen] = useState(false);
@@ -80,6 +90,7 @@ export function TaskListSelector({
   const triggerButton = (
     <button
       type="button"
+      data-task-property-popover-trigger={propertyPopoverId}
       disabled={disabled}
       aria-label={compact ? triggerLabel : undefined}
       className={cn(
@@ -111,7 +122,12 @@ export function TaskListSelector({
         ) : (
           <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
         )}
-        <PopoverContent align="start" className="w-80 p-0">
+        <PopoverContent
+          align="start"
+          className="w-80 p-0"
+          onCloseAutoFocus={onPopoverCloseAutoFocus}
+          onInteractOutside={onPopoverInteractOutside}
+        >
           <TaskListPickerPanel
             selectedListId={selectedListId}
             availableLists={availableLists}

package/src/components/ui/tu-do/shared/task-edit-dialog/task-properties-section.test.tsx

@@ -4,8 +4,9 @@
 
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { ComponentProps } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { TaskPropertiesSection } from './task-properties-section';
 
@@ -25,7 +26,9 @@ vi.mock('@tuturuuu/ui/hooks/use-calendar-preferences', () => ({
   }),
 }));
 
-function renderTaskPropertiesSection() {
+function renderTaskPropertiesSection(
+  overrides: Partial<ComponentProps<typeof TaskPropertiesSection>> = {}
+) {
   const props = {
     wsId: 'ws-1',
     boardId: 'board-1',
@@ -72,7 +75,13 @@ function renderTaskPropertiesSection() {
         created_at: '2026-01-01T00:00:00.000Z',
       },
     ],
-    taskProjects: [],
+    taskProjects: [
+      {
+        id: 'project-1',
+        name: 'Launch',
+        status: 'active',
+      },
+    ],
     workspaceMembers: [
       {
         id: 'user-1',
@@ -105,6 +114,7 @@ function renderTaskPropertiesSection() {
     disabled: false,
     isDraftMode: false,
     variant: 'compact' as const,
+    ...overrides,
   };
 
   const queryClient = new QueryClient({
@@ -124,13 +134,18 @@ function renderTaskPropertiesSection() {
 }
 
 describe('TaskPropertiesSection', () => {
-  it('keeps only one property popover open at a time', () => {
+  it('keeps only one property popover open at a time', async () => {
     renderTaskPropertiesSection();
 
     fireEvent.click(screen.getByLabelText('common.priority'));
     expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
 
     fireEvent.click(screen.getByLabelText('common.labels'));
+    await waitFor(() =>
+      expect(
+        screen.queryByText('tasks.priority_critical')
+      ).not.toBeInTheDocument()
+    );
     expect(
       screen.queryByText('tasks.priority_critical')
     ).not.toBeInTheDocument();
@@ -139,6 +154,11 @@ describe('TaskPropertiesSection', () => {
     ).toBeInTheDocument();
 
     fireEvent.click(screen.getByLabelText('common.list_name_to_do'));
+    await waitFor(() =>
+      expect(
+        screen.queryByPlaceholderText('common.search_labels')
+      ).not.toBeInTheDocument()
+    );
     expect(
       screen.queryByPlaceholderText('common.search_labels')
     ).not.toBeInTheDocument();
@@ -147,4 +167,137 @@ describe('TaskPropertiesSection', () => {
       'true'
     );
   });
+
+  it('switches from priority to dates without closing the target popover', async () => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('ws-task-boards.dialog.dates'));
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('ws-task-boards.dialog.start_date')
+      ).toBeInTheDocument()
+    );
+    expect(
+      screen.getByText('ws-task-boards.dialog.due_date')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      triggerLabel: 'common.labels',
+      targetPlaceholder: 'common.search_labels',
+    },
+    {
+      triggerLabel: 'common.projects',
+      targetPlaceholder: 'common.search_projects',
+    },
+    {
+      triggerLabel: 'common.assignees',
+      targetPlaceholder: 'common.search_members',
+    },
+  ])('switches from priority to $triggerLabel and keeps the target popover open', async ({
+    targetPlaceholder,
+    triggerLabel,
+  }) => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText(triggerLabel));
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(targetPlaceholder)).toBeInTheDocument()
+    );
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it('closes the priority popover after selecting a priority', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    fireEvent.click(screen.getByText('tasks.priority_high'));
+
+    expect(props.onPriorityChange).toHaveBeenCalledWith('high');
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps labels popover open after toggling a label', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.labels'));
+    fireEvent.click(screen.getByText('Bug'));
+
+    expect(props.onLabelToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'label-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_labels')
+    ).toBeInTheDocument();
+  });
+
+  it('keeps projects popover open after toggling a project', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.projects'));
+    fireEvent.click(screen.getByText('Launch'));
+
+    expect(props.onProjectToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'project-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_projects')
+    ).toBeInTheDocument();
+  });
+
+  it('keeps assignees popover open after toggling an assignee', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.assignees'));
+    fireEvent.click(screen.getByText('Taylor'));
+
+    expect(props.onAssigneeToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ user_id: 'user-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_members')
+    ).toBeInTheDocument();
+  });
+
+  it('closes the active popover when clicking outside', async () => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.labels'));
+    await waitFor(() =>
+      expect(
+        screen.getByPlaceholderText('common.search_labels')
+      ).toBeInTheDocument()
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    fireEvent.pointerDown(document.body, {
+      button: 0,
+      ctrlKey: false,
+      pointerType: 'mouse',
+    });
+    fireEvent.mouseDown(document.body, { button: 0, ctrlKey: false });
+    fireEvent.click(document.body);
+
+    await waitFor(() =>
+      expect(
+        screen.queryByPlaceholderText('common.search_labels')
+      ).not.toBeInTheDocument()
+    );
+  });
 });

package/src/components/ui/tu-do/shared/task-edit-dialog/task-properties-section.tsx

@@ -42,6 +42,10 @@ import { computeAccessibleLabelStyles } from '@tuturuuu/utils/label-colors';
 import dayjs from 'dayjs';
 import { useTranslations } from 'next-intl';
 import {
+  type ComponentProps,
+  cloneElement,
+  isValidElement,
+  type ReactElement,
   type ReactNode,
   useCallback,
   useEffect,
@@ -162,29 +166,75 @@ type TaskPropertyPopoverId =
   | 'assignees'
   | 'scheduling';
 
+const TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE =
+  'data-task-property-popover-trigger';
+
+const taskPropertyPopoverIds = new Set<TaskPropertyPopoverId>([
+  'priority',
+  'list',
+  'dates',
+  'estimation',
+  'labels',
+  'projects',
+  'assignees',
+  'scheduling',
+]);
+
+function isTaskPropertyPopoverId(
+  value: string | null
+): value is TaskPropertyPopoverId {
+  return !!value && taskPropertyPopoverIds.has(value as TaskPropertyPopoverId);
+}
+
+function getTaskPropertyPopoverIdFromTarget(
+  target: EventTarget | null
+): TaskPropertyPopoverId | null {
+  if (typeof Element === 'undefined' || !(target instanceof Element)) {
+    return null;
+  }
+
+  const trigger = target.closest(
+    `[${TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE}]`
+  );
+  const popoverId =
+    trigger?.getAttribute(TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE) ?? null;
+
+  return isTaskPropertyPopoverId(popoverId) ? popoverId : null;
+}
+
 function TaskPropertyPopoverTrigger({
   children,
   compact,
   label,
+  popoverId,
 }: {
   children: ReactNode;
   compact: boolean;
   label: ReactNode;
+  popoverId: TaskPropertyPopoverId;
 }) {
+  const trigger = isValidElement(children)
+    ? cloneElement(children as ReactElement<Record<string, unknown>>, {
+        [TASK_PROPERTY_POPOVER_TRIGGER_ATTRIBUTE]: popoverId,
+      })
+    : children;
+
   if (!compact) {
-    return <PopoverTrigger asChild>{children}</PopoverTrigger>;
+    return <PopoverTrigger asChild>{trigger}</PopoverTrigger>;
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <PopoverTrigger asChild>{children}</PopoverTrigger>
+        <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       </TooltipTrigger>
       <TooltipContent side="bottom">{label}</TooltipContent>
     </Tooltip>
   );
 }
 
+type TaskPropertyPopoverContentProps = ComponentProps<typeof PopoverContent>;
+
 // Calendar hours type options
 const getCalendarHoursOptions = (t: any) => [
   {
@@ -422,16 +472,92 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
     [activePopover]
   );
 
+  const openPropertyPopover = useCallback(
+    (popoverId: TaskPropertyPopoverId) => {
+      setActivePopover(popoverId);
+    },
+    []
+  );
+
+  const closePropertyPopover = useCallback(
+    (popoverId: TaskPropertyPopoverId) => {
+      setActivePopover((currentPopover) =>
+        currentPopover === popoverId ? null : currentPopover
+      );
+    },
+    []
+  );
+
   const setPopoverOpen = useCallback(
     (popoverId: TaskPropertyPopoverId, open: boolean) => {
-      setActivePopover((currentPopover) => {
-        if (open) return popoverId;
-        return currentPopover === popoverId ? null : currentPopover;
-      });
+      if (open) {
+        openPropertyPopover(popoverId);
+        return;
+      }
+
+      closePropertyPopover(popoverId);
     },
-    []
+    [closePropertyPopover, openPropertyPopover]
+  );
+
+  const handlePropertyPopoverCloseAutoFocus = useCallback<
+    NonNullable<TaskPropertyPopoverContentProps['onCloseAutoFocus']>
+  >((event) => {
+    event.preventDefault();
+  }, []);
+
+  const handlePropertyPopoverInteractOutside = useCallback<
+    NonNullable<TaskPropertyPopoverContentProps['onInteractOutside']>
+  >(
+    (event) => {
+      const targetPopoverId = getTaskPropertyPopoverIdFromTarget(event.target);
+
+      if (!targetPopoverId || targetPopoverId === activePopover) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const openTargetPopover = () => {
+        openPropertyPopover(targetPopoverId);
+      };
+
+      if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+        window.requestAnimationFrame(openTargetPopover);
+        return;
+      }
+
+      openTargetPopover();
+    },
+    [activePopover, openPropertyPopover]
   );
 
+  const propertyPopoverContentProps = useMemo(
+    () => ({
+      onCloseAutoFocus: handlePropertyPopoverCloseAutoFocus,
+      onInteractOutside: handlePropertyPopoverInteractOutside,
+    }),
+    [handlePropertyPopoverCloseAutoFocus, handlePropertyPopoverInteractOutside]
+  );
+
+  useEffect(() => {
+    if (activePopover !== 'labels') {
+      setLabelSearchQuery('');
+    }
+  }, [activePopover]);
+
+  useEffect(() => {
+    if (activePopover !== 'projects') {
+      setProjectSearchQuery('');
+    }
+  }, [activePopover]);
+
+  useEffect(() => {
+    if (activePopover !== 'assignees') {
+      setAssigneeSearchQuery('');
+    }
+  }, [activePopover]);
+
   const unselectedAvailableLabels = useMemo(
     () =>
       availableLabels.filter(
@@ -903,6 +1029,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     ? t(`tasks.priority_${priority}`)
                     : t('common.priority')
                 }
+                popoverId="priority"
               >
                 <button
                   type="button"
@@ -932,7 +1059,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-56 p-0">
+              <PopoverContent
+                align="start"
+                className="w-56 p-0"
+                {...propertyPopoverContentProps}
+              >
                 <div className="p-1">
                   {[
                     {
@@ -1000,7 +1131,10 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
               compact={isCompact}
               open={isPopoverOpen('list')}
               onOpenChange={(open) => setPopoverOpen('list', open)}
+              onPopoverCloseAutoFocus={handlePropertyPopoverCloseAutoFocus}
+              onPopoverInteractOutside={handlePropertyPopoverInteractOutside}
               onListChange={onListChange}
+              propertyPopoverId="list"
             />
 
             {/* Dates Badge */}
@@ -1015,6 +1149,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     ? `${startDate ? new Date(startDate).toLocaleDateString(t('common.locale', { defaultValue: 'en-US' }), { month: 'short', day: 'numeric' }) : t('ws-task-boards.dialog.no_start_date')} → ${endDate ? new Date(endDate).toLocaleDateString(t('common.locale', { defaultValue: 'en-US' }), { month: 'short', day: 'numeric' }) : t('ws-task-boards.dialog.no_due_date')}`
                     : t('ws-task-boards.dialog.dates')
                 }
+                popoverId="dates"
               >
                 <button
                   type="button"
@@ -1036,7 +1171,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-80 p-0">
+              <PopoverContent
+                align="start"
+                className="w-80 p-0"
+                {...propertyPopoverContentProps}
+              >
                 <div className="rounded-lg p-3.5">
                   <div className="space-y-3">
                     {/* Start Date */}
@@ -1165,6 +1304,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                       )
                     : t('ws-task-boards.dialog.estimate')
                 }
+                popoverId="estimation"
               >
                 <button
                   type="button"
@@ -1191,7 +1331,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-64 p-0">
+              <PopoverContent
+                align="start"
+                className="w-64 p-0"
+                {...propertyPopoverContentProps}
+              >
                 {!boardConfig?.estimation_type ? (
                   <EmptyStateCard
                     title={t('ws-task-boards.dialog.no_estimation_configured')}
@@ -1265,6 +1409,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                           count: selectedLabels.length,
                         })
                 }
+                popoverId="labels"
               >
                 <button
                   type="button"
@@ -1290,7 +1435,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                   </span>
                 </button>
               </TaskPropertyPopoverTrigger>
-              <PopoverContent align="start" className="w-72 p-0">
+              <PopoverContent
+                align="start"
+                className="w-72 p-0"
+                {...propertyPopoverContentProps}
+              >
                 {availableLabels.length === 0 ? (
                   <EmptyStateCard
                     title={t('ws-task-boards.dialog.no_labels_configured')}
@@ -1415,6 +1564,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                             count: selectedProjects.length,
                           })
                   }
+                  popoverId="projects"
                 >
                   <button
                     type="button"
@@ -1440,7 +1590,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     </span>
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   {taskProjects.length === 0 ? (
                     <EmptyStateCard
                       title={t('ws-task-boards.dialog.no_projects_configured')}
@@ -1556,6 +1710,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                             count: selectedAssignees.length,
                           })
                   }
+                  popoverId="assignees"
                 >
                   <button
                     type="button"
@@ -1582,7 +1737,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     </span>
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   {workspaceMembers.length === 0 ? (
                     <div className="p-4 text-center text-muted-foreground text-sm">
                       {t('ws-task-boards.dialog.no_members_found')}
@@ -1679,6 +1838,7 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                       ? formatDuration(totalMinutes, t)
                       : t('ws-task-boards.dialog.schedule')
                   }
+                  popoverId="scheduling"
                 >
                   <button
                     type="button"
@@ -1711,7 +1871,11 @@ export function TaskPropertiesSection(props: TaskPropertiesSectionProps) {
                     )}
                   </button>
                 </TaskPropertyPopoverTrigger>
-                <PopoverContent align="start" className="w-72 p-0">
+                <PopoverContent
+                  align="start"
+                  className="w-72 p-0"
+                  {...propertyPopoverContentProps}
+                >
                   <div className="rounded-lg p-3">
                     <div className="space-y-3">
                       {/* Duration */}

package/src/components/ui/tu-do/templates/task-template-client.test.tsx

@@ -0,0 +1,52 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { listWorkspaceTaskTemplates } from './task-template-api';
+import { TaskTemplateClient } from './task-template-client';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, string>) =>
+    values?.count ? `${key}:${values.count}` : key,
+}));
+
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  listWorkspaceTaskBoards: vi.fn(async () => ({ boards: [] })),
+  listWorkspaceTaskLists: vi.fn(async () => ({ lists: [] })),
+}));
+
+vi.mock('./task-template-api', () => ({
+  createWorkspaceTaskTemplate: vi.fn(),
+  deleteWorkspaceTaskTemplate: vi.fn(),
+  instantiateWorkspaceTaskTemplate: vi.fn(),
+  listWorkspaceTaskTemplates: vi.fn(async () => ({ templates: [] })),
+  saveWorkspaceTaskTemplateFromTask: vi.fn(),
+}));
+
+function renderWithQueryClient(ui: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        staleTime: 30_000,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+  );
+}
+
+describe('TaskTemplateClient', () => {
+  it('fetches task templates even when the server shell starts empty', async () => {
+    renderWithQueryClient(
+      <TaskTemplateClient initialTemplates={[]} wsId="ws-1" />
+    );
+
+    await waitFor(() => {
+      expect(listWorkspaceTaskTemplates).toHaveBeenCalledWith('ws-1');
+    });
+  });
+});

package/src/components/ui/tu-do/templates/task-template-client.tsx

@@ -57,7 +57,7 @@ export function TaskTemplateClient({
       const payload = await listWorkspaceTaskTemplates(wsId);
       return payload.templates;
     },
-    initialData: initialTemplates,
+    placeholderData: initialTemplates,
   });
 
   const { data: boards = [] } = useQuery({