fix(ui): keep ribbon dropdowns open with disabled siblings (#7602)

Author: wpxp123456

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

@@ -47,6 +47,7 @@ const TooltipWrapperContext = createContext({
     setDropdownVisible: (_visible: boolean) => {},
 });
 
+// Ribbon dropdowns share one open key; disabled items must only clear it when they own it.
 const ToolbarDropdownContext = createContext<{
     openDropdownKey: string | null;
     setOpenDropdownKey: (key: string | null) => void;
@@ -158,10 +159,10 @@ export function DropdownWrapper(props: Omit<Partial<IDropdownProps>, 'overlay'>
     const overlayRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
-        if (disabled) {
+        if (disabled && dropdownVisible) {
             setDropdownVisible(false);
         }
-    }, [disabled, setDropdownVisible]);
+    }, [disabled, dropdownVisible, setDropdownVisible]);
 
     useEffect(() => {
         const ownerDocument = triggerRef.current?.ownerDocument;
@@ -268,10 +269,10 @@ export function DropdownMenuWrapper({
     const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 
     useEffect(() => {
-        if (disabled) {
+        if (disabled && dropdownVisible) {
             setDropdownVisible(false);
         }
-    }, [disabled, setDropdownVisible]);
+    }, [disabled, dropdownVisible, setDropdownVisible]);
 
     const menuManagerService = useDependency(IMenuManagerService);
     const resolveMenuItems = () => menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];

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

@@ -135,6 +135,27 @@ describe('DropdownMenuLabel', () => {
 });
 
 describe('DropdownWrapper', () => {
+    it('keeps an enabled dropdown open when a sibling is disabled', () => {
+        const { getByRole, queryByText } = render(
+            <ToolbarDropdownProvider>
+                <TooltipWrapper dropdownKey="disabled-dropdown">
+                    <DropdownWrapper disabled overlay={<div>Disabled content</div>}>
+                        <button type="button">Disabled dropdown</button>
+                    </DropdownWrapper>
+                </TooltipWrapper>
+                <TooltipWrapper dropdownKey="enabled-dropdown">
+                    <DropdownWrapper overlay={<div>Enabled content</div>}>
+                        <button type="button">Enabled dropdown</button>
+                    </DropdownWrapper>
+                </TooltipWrapper>
+            </ToolbarDropdownProvider>
+        );
+
+        fireEvent.click(getByRole('button', { name: 'Enabled dropdown' }));
+
+        expect(queryByText('Enabled content')).not.toBeNull();
+    });
+
     it('opens toward the left in RTL layouts', async () => {
         const { findByText, getByRole } = render(
             <ConfigProvider direction="rtl" mountContainer={document.body}>