fix(focus): add ignoreElement support and update deps (#557)

* fix(focus): add ignoreElement support and update deps

- Update @rc-component/util to 1.9.0
- Add ignoreElement to handle focus elements from Portal
- Remove console.log in Panel component
- Add test case for focus handling with Portal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Update tests/focus.spec.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: 3 people

docs/demo/with-portal.md

@@ -0,0 +1,8 @@
+---
+title: with-portal
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/with-portal.tsx"></code>

docs/examples/with-portal.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dialog from '@rc-component/dialog';
+
+const DivPortal: React.FC = () => {
+  return ReactDOM.createPortal(
+    <div
+      id="test-portal"
+      style={{
+        position: 'fixed',
+        right: 20,
+        bottom: 20,
+        background: 'white',
+        padding: 20,
+        border: '1px solid #ccc',
+        zIndex: 1000000,
+      }}
+    >
+      <input type="text" />
+    </div>,
+    document.body
+  );
+};
+
+const MyControl: React.FC = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  const onClick = () => {
+    setVisible(true);
+  };
+
+  const onClose = () => {
+    setVisible(false);
+  };
+
+  return (
+    <div style={{ margin: 20 }}>
+      <p>
+        <button type="button" onClick={onClick}>
+          show dialog
+        </button>
+      </p>
+      <Dialog visible={visible} onClose={onClose}>
+        hello world
+        <input type="text" />
+        <input type="text" />
+        <DivPortal />
+      </Dialog>
+    </div>
+  );
+};
+
+export default MyControl;

package.json

@@ -51,7 +51,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.3",
     "@rc-component/portal": "^2.1.0",
-    "@rc-component/util": "^1.7.0",
+    "@rc-component/util": "^1.9.0",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -87,4 +87,4 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   }
-}
+}

src/Dialog/Content/Panel.tsx

@@ -54,7 +54,10 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
   const internalRef = useRef<HTMLDivElement>(null);
   const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
 
-  useLockFocus(visible && isFixedPos && focusTrap !== false, () => internalRef.current);
+  const [ignoreElement] = useLockFocus(
+    visible && isFixedPos && focusTrap !== false,
+    () => internalRef.current,
+  );
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {
@@ -152,6 +155,9 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
       tabIndex={-1}
+      onFocus={(e) => {
+        ignoreElement(e.target);
+      }}
     >
       <MemoChildren shouldUpdate={visible || forceRender}>
         {modalRender ? modalRender(content) : content}

tests/focus.spec.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { act, render } from '@testing-library/react';
 import Dialog from '../src';
 
@@ -9,7 +10,12 @@ jest.mock('@rc-component/util/lib/Dom/focus', () => {
 
   const useLockFocus = (visible: boolean, ...rest: any[]) => {
     globalThis.__useLockFocusVisible = visible;
-    return actual.useLockFocus(visible, ...rest);
+    const hooks = actual.useLockFocus(visible, ...rest);
+    const proxyIgnoreElement = (ele: HTMLElement) => {
+      globalThis.__ignoredElement = ele;
+      hooks[0](ele);
+    };
+    return [proxyIgnoreElement, ...hooks.slice(1)] as ReturnType<typeof actual.useLockFocus>;
   };
 
   return {
@@ -82,4 +88,23 @@ describe('Dialog.Focus', () => {
 
     expect(globalThis.__useLockFocusVisible).toBe(false);
   });
+
+  it('should call ignoreElement when input in portal is focused', () => {
+    render(
+      <Dialog visible styles={{ wrapper: { position: 'fixed' } }}>
+        {ReactDOM.createPortal(<input id="portal-input" />, document.body)}
+      </Dialog>,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const input = document.getElementById('portal-input') as HTMLElement;
+    act(() => {
+      input.focus();
+    });
+
+    expect(globalThis.__ignoredElement).toBe(input);
+  });
 });