fix: only disappearing elements should not be interactive (#297)

* fix: disappearing elements should not be interactive

ant-design/ant-design#35051 (comment)

* chore: patch measure logic

Co-authored-by: zombiej <[email protected]>

Author: afc163

src/Popup/PopupInner.tsx

@@ -182,7 +182,9 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
       zIndex,
       opacity:
         status === 'motion' || status === 'stable' || !visible ? undefined : 0,
-      pointerEvents: status === 'stable' ? undefined : 'none',
+      // Cannot interact with disappearing elements
+      // https://github.com/ant-design/ant-design/issues/35051#issuecomment-1101340714
+      pointerEvents: !visible && status !== 'stable' ? 'none' : undefined,
       ...style,
     };
 

tests/motion.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import Trigger from '../src';
 import CSSMotion from 'rc-motion';
 import { placementAlignMap } from './util';
@@ -34,6 +34,10 @@ describe('Trigger.Motion', () => {
     expect(document.querySelector('.rc-trigger-popup')).toHaveClass(
       'bamboo-appear',
     );
+
+    expect(
+      document.querySelector('.rc-trigger-popup').style.pointerEvents,
+    ).toEqual('');
   });
 
   it('use correct leave motion', () => {
@@ -60,4 +64,30 @@ describe('Trigger.Motion', () => {
       expect.anything(),
     );
   });
+
+  it('not lock on appear', () => {
+    const genTrigger = (props) => (
+      <Trigger
+        popup={<strong className="x-content" />}
+        popupMotion={{
+          motionName: 'bamboo',
+        }}
+        popupVisible
+        {...props}
+      >
+        <span />
+      </Trigger>
+    );
+
+    const { rerender } = render(genTrigger());
+
+    expect(document.querySelector('.rc-trigger-popup')).not.toHaveStyle({
+      pointerEvents: 'none',
+    });
+
+    rerender(genTrigger({ popupVisible: false }));
+    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
+      pointerEvents: 'none',
+    });
+  });
 });

tests/util.test.jsx

@@ -84,7 +84,7 @@ describe('Trigger.Util', () => {
       );
 
       expect(container.innerHTML).toEqual(
-        '<div>light</div><div><div class="rc-trigger-popup" style="opacity: 0; pointer-events: none;"><div>bamboo</div></div></div>',
+        '<div>light</div><div><div class="rc-trigger-popup" style="opacity: 0;"><div>bamboo</div></div></div>',
       );
     });
   });