fix(ui): preserve embed dropdown ownership

Author: DR-Univer

packages/ui/src/views/components/ribbon/TooltipButtonWrapper.tsx

@@ -39,7 +39,13 @@ import {
 import { combineLatest, map, merge, of, scan, startWith } from 'rxjs';
 import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
 import { useDependency, useObservable } from '../../../utils/di';
-import { keepInteractionInsideSameEmbedBoundary } from '../../../utils/embed-boundary';
+import {
+    EMBED_CHILD_UNIT_ID_ATTRIBUTE,
+    EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE,
+    getEmbedBoundaryOwner,
+    getEmbedChildUnitId,
+    keepInteractionInsideSameEmbedBoundary,
+} from '../../../utils/embed-boundary';
 import { CustomLabel } from '../../custom-label/CustomLabel';
 
 const TooltipWrapperContext = createContext({
@@ -155,6 +161,10 @@ export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'>
     const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
     const triggerRef = useRef<HTMLDivElement>(null);
     const overlayRef = useRef<HTMLDivElement>(null);
+    const [embedBoundary, setEmbedBoundary] = useState<{
+        childUnitId?: string;
+        owner?: string;
+    }>({});
 
     useEffect(() => {
         if (disabled) {
@@ -178,9 +188,19 @@ export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'>
     }, [dropdownVisible, setDropdownVisible]);
 
     function handleVisibleChange(visible: boolean) {
+        if (visible) {
+            setEmbedBoundary({
+                childUnitId: getEmbedChildUnitId(triggerRef.current),
+                owner: getEmbedBoundaryOwner(triggerRef.current),
+            });
+        }
         setDropdownVisible(visible);
     }
 
+    function handleEmbedBoundaryFocusOutside(event: { currentTarget: EventTarget | null; target: EventTarget | null; preventDefault: () => void }) {
+        keepInteractionInsideSameEmbedBoundary(event);
+    }
+
     return (
         <Dropdown
             align={align ?? (direction === 'rtl' ? 'end' : 'start')}
@@ -192,6 +212,12 @@ export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'>
             disabled={disabled}
             open={dropdownVisible}
             onOpenChange={handleVisibleChange}
+            onFocusOutside={handleEmbedBoundaryFocusOutside}
+            onInteractOutside={handleEmbedBoundaryFocusOutside}
+            {...{
+                [EMBED_CHILD_UNIT_ID_ATTRIBUTE]: embedBoundary.childUnitId,
+                [EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE]: embedBoundary.owner,
+            }}
         >
             <div ref={triggerRef} className="univer-h-full" onClick={(e) => e.stopPropagation()}>
                 {children}

packages/ui/src/views/components/ribbon/__tests__/TooltipButtonWrapper.spec.tsx

@@ -30,6 +30,7 @@ import { IconManager } from '../../../../common/icon-manager';
 import { MenuItemType } from '../../../../services/menu/menu';
 import { IMenuManagerService } from '../../../../services/menu/menu-manager.service';
 import { connectInjector } from '../../../../utils/di';
+import { EMBED_CHILD_UNIT_ID_ATTRIBUTE, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE } from '../../../../utils/embed-boundary';
 import {
     DropdownMenuLabel,
     DropdownMenuWrapper,
@@ -171,6 +172,31 @@ describe('DropdownWrapper', () => {
 
         expect(queryByText('Dropdown content')).toBeNull();
     });
+
+    it('copies the embed boundary to the portal before rendering its content', async () => {
+        const { findByText, getByRole } = render(
+            <div
+                {...{
+                    [EMBED_CHILD_UNIT_ID_ATTRIBUTE]: 'child-doc',
+                    [EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE]: 'embed-doc',
+                }}
+            >
+                <ToolbarDropdownProvider>
+                    <TooltipWrapper dropdownKey="test-embed-dropdown">
+                        <DropdownWrapper overlay={<div>Embed dropdown content</div>}>
+                            <button type="button">Open embed dropdown</button>
+                        </DropdownWrapper>
+                    </TooltipWrapper>
+                </ToolbarDropdownProvider>
+            </div>
+        );
+
+        fireEvent.click(getByRole('button', { name: 'Open embed dropdown' }));
+        const content = (await findByText('Embed dropdown content')).closest('[data-slot="popover-content"]');
+
+        expect(content?.getAttribute(EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE)).toBe('embed-doc');
+        expect(content?.getAttribute(EMBED_CHILD_UNIT_ID_ATTRIBUTE)).toBe('child-doc');
+    });
 });
 
 describe('DropdownMenuWrapper', () => {