fix: Drawer cover other elements when closed

close #24287
ant-design · May 19, 2020 · 9555e27 · 9555e27
1 parent baa56b6
commit 9555e27
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 39 deletions.
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
@@ -13,51 +13,43 @@ title:
 
 Basic drawer.
 
-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
-
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
   };
-
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
-
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```
 
-```css
+<style>
 [data-theme='compact'] .ant-drawer-body p {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
-```
+</style>
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -137,7 +137,11 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   };
 
   getOffsetStyle() {
-    const { placement, width, height } = this.props;
+    const { placement, width, height, visible, mask } = this.props;
+    // https://github.com/ant-design/ant-design/issues/24287
+    if (!visible && !mask) {
+      return {};
+    }
     const offsetStyle: any = {};
     if (placement === 'left' || placement === 'right') {
       offsetStyle.width = width;