feat: add autoDestroy prop(#19536); (#178)

Author: kerm1it

examples/simple.js

@@ -158,6 +158,12 @@ class Test extends React.Component {
     });
   };
 
+  autoDestroy = e => {
+    this.setState({
+      autoDestroy: e.target.checked,
+    });
+  };
+
   render() {
     const { state } = this;
     const { trigger } = state;
@@ -248,6 +254,15 @@ class Test extends React.Component {
             destroyPopupOnHide
           </label>
           &nbsp;&nbsp;&nbsp;&nbsp;
+          <label>
+            <input
+              checked={!!this.state.autoDestroy}
+              type="checkbox"
+              onChange={this.autoDestroy}
+            />
+            autoDestroy
+          </label>
+          &nbsp;&nbsp;&nbsp;&nbsp;
           <label>
             <input
               checked={!!this.state.mask}
@@ -294,6 +309,7 @@ class Test extends React.Component {
             popupAlign={this.getPopupAlign()}
             popupPlacement={state.placement}
             destroyPopupOnHide={this.state.destroyPopupOnHide}
+            autoDestroy={this.state.autoDestroy}
             // zIndex={40}
             mask={this.state.mask}
             maskClosable={this.state.maskClosable}

src/index.tsx

@@ -75,6 +75,7 @@ export interface TriggerProps {
   popupAlign?: AlignType;
   popupVisible?: boolean;
   defaultPopupVisible?: boolean;
+  autoDestroy: boolean;
 
   stretch?: string;
   alignPoint?: boolean; // Maybe we can support user pass position in the future
@@ -136,6 +137,7 @@ export function generateTrigger(
       action: [],
       showAction: [],
       hideAction: [],
+      autoDestroy: false,
     };
 
     popupRef = React.createRef<Popup>();
@@ -730,7 +732,13 @@ export function generateTrigger(
 
     render() {
       const { popupVisible } = this.state;
-      const { children, forceRender, alignPoint, className } = this.props;
+      const {
+        children,
+        forceRender,
+        alignPoint,
+        className,
+        autoDestroy,
+      } = this.props;
       const child = React.Children.only(children) as React.ReactElement;
       const newChildProps: HTMLAttributes<HTMLElement> & { key: string } = {
         key: 'trigger',
@@ -802,6 +810,10 @@ export function generateTrigger(
         );
       }
 
+      if (!popupVisible && autoDestroy) {
+        portal = null;
+      }
+
       return (
         <TriggerContext.Provider
           value={{ onPopupMouseDown: this.onPopupMouseDown }}

tests/basic.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import Portal from 'rc-util/lib/Portal';
 import Trigger from '../src';
 
 const autoAdjustOverflow = {
@@ -382,6 +383,43 @@ describe('Trigger.Basic', () => {
     });
   });
 
+  describe('support autoDestroy', () => {
+    it('defaults to false', () => {
+      const wrapper = mount(
+        <Trigger
+          action={['click']}
+          popupAlign={placementAlignMap.topRight}
+          popup={<strong>trigger</strong>}
+        >
+          <div className="target">click</div>
+        </Trigger>,
+      );
+      expect(wrapper.prop('autoDestroy')).toBeFalsy();
+      wrapper.trigger();
+      expect(wrapper.find(Portal).exists()).toBe(true);
+      wrapper.trigger();
+      expect(wrapper.find(Portal).exists()).toBe(true);
+    });
+
+    it('set true will destroy portal on hide', () => {
+      const wrapper = mount(
+        <Trigger
+          action={['click']}
+          autoDestroy
+          popupAlign={placementAlignMap.topRight}
+          popup={<strong>trigger</strong>}
+        >
+          <div className="target">click</div>
+        </Trigger>,
+      );
+
+      wrapper.trigger();
+      expect(wrapper.find(Portal).exists()).toBe(true);
+      wrapper.trigger();
+      expect(wrapper.find(Portal).exists()).toBe(false);
+    });
+  });
+
   describe('github issues', () => {
     // https://github.com/ant-design/ant-design/issues/9114
     it('click in popup of popup', () => {