fix: multiple Dialog change visible abnormal

Author: shaodahong

examples/ant-design.tsx

@@ -30,6 +30,7 @@ const getSvg = (path: string, props = {}, align = false) => {
 class MyControl extends React.Component<any, any> {
   state = {
     visible: false,
+    visible2: false,
     width: 600,
     destroyOnClose: false,
     center: false,
@@ -54,6 +55,13 @@ class MyControl extends React.Component<any, any> {
     });
   }
 
+  onClose2 = (e: React.SyntheticEvent) => {
+    this.setState({
+      visible: false,
+      visible2: false,
+    });
+  }
+
   onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.setState({
       destroyOnClose: e.target.checked,
@@ -107,6 +115,39 @@ class MyControl extends React.Component<any, any> {
       >
         <input autoFocus />
         <p>basic modal</p>
+        <button onClick={() => {
+          this.setState({
+            visible: false,
+            visible2: true,
+          });
+        }}>打开第二个并关闭当前的</button>
+        <button onClick={() => {
+          this.setState({
+            visible: true,
+            visible2: true,
+          });
+        }}>打开第二个</button>
+        <button onClick={this.changeWidth}>change width</button>
+        <button onClick={this.toggleCloseIcon}>
+          use custom icon, is using icon: {this.state.useIcon && 'true' || 'false'}.
+        </button>
+        <div style={{ height: 200 }} />
+      </Dialog>
+    );
+
+    const dialog2 = (
+      <Dialog
+        visible={this.state.visible2}
+        onClose={this.onClose2}
+      >
+        <input autoFocus />
+        <p>basic modal</p>
+        <button onClick={() => {
+          this.setState({
+            visible2: false,
+          });
+        }}>关闭当前</button>
+        <button onClick={this.onClose2}>关闭所有</button>
         <button onClick={this.changeWidth}>change width</button>
         <button onClick={this.toggleCloseIcon}>
           use custom icon, is using icon: {this.state.useIcon && 'true' || 'false'}.
@@ -159,6 +200,7 @@ class MyControl extends React.Component<any, any> {
           </label>
         </p>
         {dialog}
+        {dialog2}
       </div>
     );
   }

src/Dialog.tsx

@@ -45,6 +45,10 @@ function offset(el: any) {
   return pos;
 }
 
+// https://github.com/ant-design/ant-design/issues/19340
+// https://github.com/ant-design/ant-design/issues/19332
+let cacheOverflow = {};
+
 export interface IDialogChildProps extends IDialogPropTypes {
   getOpenCount: () => number;
 }
@@ -96,7 +100,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
       // first show
       if (!prevProps.visible) {
         this.openTime = Date.now();
-        this.addScrollingEffect();
+        this.switchScrollingEffect();
         this.tryFocus();
         const dialogNode = ReactDOM.findDOMNode(this.dialog);
         if (mousePosition) {
@@ -119,13 +123,16 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
         }
         this.lastOutSideFocusNode = null;
       }
+      // if (!props.visible) {
+      //   this.switchScrollingEffect();
+      // }
     }
   }
 
   componentWillUnmount() {
     const { visible, getOpenCount } = this.props;
     if ((visible || this.inTransition) && !getOpenCount()) {
-      this.removeScrollingEffect();
+      this.switchScrollingEffect();
     }
     clearTimeout(this.timeoutId);
   }
@@ -145,7 +152,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
       this.wrap.style.display = 'none';
     }
     this.inTransition = false;
-    this.removeScrollingEffect();
+    this.switchScrollingEffect();
     if (afterClose) {
       afterClose();
     }
@@ -368,26 +375,26 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
     return transitionName;
   }
 
-  addScrollingEffect = () => {
+  switchScrollingEffect = () => {
     const { getOpenCount } = this.props;
     const openCount = getOpenCount();
-    if (openCount !== 1) {
-      return;
-    }
-    switchScrollingEffect();
-    this.cacheOverflow = {
-      overflowX: document.body.style.overflowX,
-      overflowY: document.body.style.overflowY,
-    };
-    document.body.style.overflow = 'hidden';
-  }
 
-  removeScrollingEffect = () => {
-    const { getOpenCount } = this.props;
-    const openCount = getOpenCount();
-    if (!openCount && this.cacheOverflow) {
-      document.body.style.overflowX = this.cacheOverflow.overflowX;
-      document.body.style.overflowY = this.cacheOverflow.overflowY;
+    if (openCount === 1) {
+      if (cacheOverflow.hasOwnProperty('overflowX')) {
+        return;
+      }
+      cacheOverflow = {
+        overflowX: document.body.style.overflowX,
+        overflowY: document.body.style.overflowY,
+      };
+      document.body.style.overflow = 'hidden';
+      switchScrollingEffect();
+    } else if (!openCount) {
+      if (cacheOverflow.overflowX !== undefined || cacheOverflow.overflowY !== undefined) {
+        document.body.style.overflowX = cacheOverflow.overflowX;
+        document.body.style.overflowY = cacheOverflow.overflowY;
+      }
+      cacheOverflow = {};
       switchScrollingEffect(true);
     }
   }