Skip to content

feat: support close popups by escape key #594

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aojunhao123 wants to merge 9 commits into
base: master
Choose a base branch
from
+110 −1
Open

feat: support close popups by escape key #594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e32a0d8
feat: support close popups by escape key
aojunhao123 Dec 4, 2025
4591871
chore: adjust
aojunhao123 Dec 5, 2025
26500eb
adjust logic
aojunhao123 Dec 22, 2025
58270c9
mock useId
aojunhao123 Dec 22, 2025
36dcac9
upgrade portal version
aojunhao123 Dec 23, 2025
84659ec
remove faketimer
aojunhao123 Dec 23, 2025
38363a6
chore: adjust
aojunhao123 Dec 23, 2025
3d870c9
chore: adjust
aojunhao123 Dec 23, 2025
76db217
lint fix
aojunhao123 Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
},
"dependencies": {
"@rc-component/motion": "^1.1.4",
"@rc-component/portal": "^2.0.0",
"@rc-component/portal": "^2.1.0",
Copy link

@coderabbitai coderabbitai bot Dec 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

版本不存在：@rc-component/portal 2.1.0 未在 npm 注册表中发布

@rc-component/portal 的最新版本是 2.0.0，而非 2.1.0。package.json 中指定的版本 ^2.1.0 无法正确安装，因为此版本在 npm 上不存在。请将依赖版本改为 ^2.0.0，或等待 2.1.0 版本正式发布。

🤖 Prompt for AI Agents 
In package.json around line 45, the dependency "@rc-component/portal": "^2.1.0"
refers to a non‑existent npm release; change the version specifier to a valid
published release such as "^2.0.0" (or to an exact published version) and then
run your package manager to update lockfiles (npm install / yarn install) so the
lockfile reflects the corrected dependency.

Copy link
Contributor Author

@aojunhao123 aojunhao123 Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

你说不存在就不存在了？

Copy link

@coderabbitai coderabbitai bot Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

"@rc-component/resize-observer": "^1.0.0",
"@rc-component/util": "^1.2.1",
"clsx": "^2.1.1"
Expand Down
4 changes: 4 additions & 0 deletions src/Popup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import Mask from './Mask';
import PopupContent from './PopupContent';
import useOffsetStyle from '../hooks/useOffsetStyle';
import { useEvent } from '@rc-component/util';
import type { PortalProps } from '@rc-component/portal';
Copy link

@coderabbitai coderabbitai bot Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

TypeError：PortalProps 类型缺少 onEsc 属性

根据 @rc-component/portal 的类型定义，PortalProps 接口中不存在 onEsc 属性。尝试使用 onEsc?: PortalProps['onEsc'] 会导致 TypeScript 编译失败。

当前版本 @rc-component/portal@2.0.0 不支持该属性。解决方案：

  1. 如果需要 Escape 键关闭功能，需要在 PopupProps 中直接定义 onEsc 类型，而不是从 PortalProps 继承
  2. 或者考虑为 Portal 组件的业务包装层单独处理 ESC 键事件
🤖 Prompt for AI Agents 
In src/Popup/index.tsx around line 17, the code attempts to reference
PortalProps.onEsc but @rc-component/portal v2.0.0's PortalProps has no onEsc,
causing a TypeScript error; to fix, stop trying to inherit onEsc from
PortalProps and instead add an explicit onEsc?: (e: KeyboardEvent) => void (or
the appropriate signature) to your PopupProps interface, or handle ESC key logic
inside the Popup wrapper (attach a keydown listener that calls a local onEsc
handler) so types align with the external library.


export interface MobileConfig {
mask?: boolean;
Expand All @@ -24,6 +25,7 @@ export interface MobileConfig {
}

export interface PopupProps {
onEsc?: PortalProps['onEsc'];
prefixCls: string;
className?: string;
style?: React.CSSProperties;
Expand Down Expand Up @@ -87,6 +89,7 @@ export interface PopupProps {

const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
const {
onEsc,
popup,
className,
prefixCls,
Expand Down Expand Up @@ -234,6 +237,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
open={forceRender || isNodeVisible}
getContainer={getPopupContainer && (() => getPopupContainer(target))}
autoDestroy={autoDestroy}
onEsc={onEsc}
>
<Mask
prefixCls={prefixCls}
Expand Down
1 change: 1 addition & 0 deletions src/UniqueProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,7 @@ const UniqueProvider = ({
<Popup
ref={setPopupRef}
portal={Portal}
onEsc={mergedOptions.onEsc}
prefixCls={prefixCls}
popup={mergedOptions.popup}
className={clsx(
Expand Down
2 changes: 2 additions & 0 deletions src/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import type { CSSMotionProps } from '@rc-component/motion';
import type { PortalProps } from '@rc-component/portal';
import type { TriggerProps } from './index';
import type { AlignType, ArrowTypeOuter, BuildInPlacements } from './interface';

Expand Down Expand Up @@ -34,6 +35,7 @@ export interface UniqueShowOptions {
arrow?: ArrowTypeOuter;
getPopupContainer?: TriggerProps['getPopupContainer'];
getPopupClassNameFromAlign?: (align: AlignType) => string;
onEsc?: PortalProps['onEsc'];
}

export interface UniqueContextProps {
Expand Down
10 changes: 10 additions & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import useAlign from './hooks/useAlign';
import useDelay from './hooks/useDelay';
import useWatch from './hooks/useWatch';
import useWinClick from './hooks/useWinClick';
import type { PortalProps } from '@rc-component/portal';

import type {
ActionType,
AlignType,
Expand Down Expand Up @@ -347,6 +349,7 @@ export function generateTrigger(
getPopupContainer,
getPopupClassNameFromAlign,
id,
onEsc,
}));

// Handle controlled state changes for UniqueProvider
Expand Down Expand Up @@ -419,6 +422,12 @@ export function generateTrigger(
}, delay);
};

function onEsc({ top }: Parameters<PortalProps['onEsc']>[0]) {
if (top) {
triggerOpen(false);
}
}

// ========================== Motion ============================
const [inMotion, setInMotion] = React.useState(false);

Expand Down Expand Up @@ -830,6 +839,7 @@ export function generateTrigger(
forceRender={forceRender}
autoDestroy={mergedAutoDestroy}
getPopupContainer={getPopupContainer}
onEsc={onEsc}
// Arrow
align={alignInfo}
arrow={innerArrow}
Expand Down
76 changes: 76 additions & 0 deletions tests/basic.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import ReactDOM, { createPortal } from 'react-dom';
import Trigger from '../src';
import { awaitFakeTimer, placementAlignMap } from './util';

jest.mock('@rc-component/util/lib/hooks/useId', () => {
const origin = jest.requireActual('react');
return origin.useId;
});

describe('Trigger.Basic', () => {
beforeAll(() => {
spyElementPrototypes(HTMLElement, {
Expand Down Expand Up @@ -1200,4 +1205,75 @@ describe('Trigger.Basic', () => {
await awaitFakeTimer();
expect(isPopupHidden()).toBeTruthy();
});

describe('keyboard', () => {
it('esc should close popup', async () => {
const { container } = render(
<Trigger action="click" popup={<strong>trigger</strong>}>
<div className="target" />
</Trigger>,
);

trigger(container, '.target');
expect(isPopupHidden()).toBeFalsy();

fireEvent.keyDown(window, { key: 'Escape' });
expect(isPopupHidden()).toBeTruthy();
});

it('non-escape key should not close popup', async () => {
const { container } = render(
<Trigger action="click" popup={<strong>trigger</strong>}>
<div className="target" />
</Trigger>,
);

trigger(container, '.target');
expect(isPopupHidden()).toBeFalsy();

fireEvent.keyDown(window, { key: 'Enter' });
expect(isPopupHidden()).toBeFalsy();
});

it('esc should close nested popup from inside out', async () => {
const NestedPopup = () => (
<Trigger
action="click"
popupClassName="inner-popup"
popup={<div>Inner Content</div>}
>
<button type="button" className="inner-target">
Inner Target
</button>
</Trigger>
);

const { container } = render(
<Trigger
action="click"
popupClassName="outer-popup"
popup={
<div className="outer-popup-content">
<NestedPopup />
</div>
}
>
<div className="outer-target" />
</Trigger>,
);

trigger(container, '.outer-target');
expect(isPopupClassHidden('.outer-popup')).toBeFalsy();

fireEvent.click(document.querySelector('.inner-target'));
expect(isPopupClassHidden('.inner-popup')).toBeFalsy();

fireEvent.keyDown(window, { key: 'Escape' });
expect(isPopupClassHidden('.inner-popup')).toBeTruthy();
expect(isPopupClassHidden('.outer-popup')).toBeFalsy();

fireEvent.keyDown(window, { key: 'Escape' });
expect(isPopupClassHidden('.outer-popup')).toBeTruthy();
});
});
});
15 changes: 15 additions & 0 deletions tests/unique.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,4 +374,19 @@ describe('Trigger.Unique', () => {
// Verify onAlign was called due to target change
expect(mockOnAlign).toHaveBeenCalled();
});

it('esc should close unique popup', async () => {
const { container,baseElement } = render(
<UniqueProvider>
<Trigger action={['click']} popup={<div>Popup</div>} unique>
<div className="target" />
</Trigger>
</UniqueProvider>,
);
fireEvent.click(container.querySelector('.target'));
expect(baseElement.querySelector('.rc-trigger-popup-hidden')).toBeFalsy();

fireEvent.keyDown(window, { key: 'Escape' });
expect(baseElement.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
});
});
1 change: 1 addition & 0 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"types": ["@testing-library/jest-dom", "node"],
"paths": {
"@/*": ["src/*"],
"@@/*": [".dumi/tmp/*"],
Expand Down
Loading