feat: support close popups by escape key (#594)

* feat: support close popups by escape key

* chore: adjust

* adjust logic

* mock useId

* upgrade portal version

* remove faketimer

* chore: adjust

* chore: adjust

* lint fix

* update deps

* update deps

Author: aojunhao123

package.json

@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
-    "@rc-component/portal": "^2.0.0",
+    "@rc-component/portal": "^2.2.0",
     "@rc-component/resize-observer": "^1.0.0",
     "@rc-component/util": "^1.2.1",
     "clsx": "^2.1.1"

src/Popup/index.tsx

@@ -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';
 
 export interface MobileConfig {
   mask?: boolean;
@@ -24,6 +25,7 @@ export interface MobileConfig {
 }
 
 export interface PopupProps {
+  onEsc?: PortalProps['onEsc'];
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
@@ -87,6 +89,7 @@ export interface PopupProps {
 
 const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   const {
+    onEsc,
     popup,
     className,
     prefixCls,
@@ -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}

src/UniqueProvider/index.tsx

@@ -184,6 +184,7 @@ const UniqueProvider = ({
           <Popup
             ref={setPopupRef}
             portal={Portal}
+            onEsc={mergedOptions.onEsc}
             prefixCls={prefixCls}
             popup={mergedOptions.popup}
             className={clsx(

src/context.ts

@@ -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';
 
@@ -34,6 +35,7 @@ export interface UniqueShowOptions {
   arrow?: ArrowTypeOuter;
   getPopupContainer?: TriggerProps['getPopupContainer'];
   getPopupClassNameFromAlign?: (align: AlignType) => string;
+  onEsc?: PortalProps['onEsc'];
 }
 
 export interface UniqueContextProps {

src/index.tsx

@@ -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,
@@ -347,6 +349,7 @@ export function generateTrigger(
       getPopupContainer,
       getPopupClassNameFromAlign,
       id,
+      onEsc,
     }));
 
     // Handle controlled state changes for UniqueProvider
@@ -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);
 
@@ -830,6 +839,7 @@ export function generateTrigger(
               forceRender={forceRender}
               autoDestroy={mergedAutoDestroy}
               getPopupContainer={getPopupContainer}
+              onEsc={onEsc}
               // Arrow
               align={alignInfo}
               arrow={innerArrow}

tests/basic.test.jsx

@@ -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, {
@@ -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();
+    });
+  });
 });

tests/unique.test.tsx

@@ -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();
+  });
 });

tsconfig.json

@@ -8,6 +8,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "types": ["@testing-library/jest-dom", "node"],
     "paths": {
       "@/*": ["src/*"],
       "@@/*": [".dumi/tmp/*"],