Ability to open Drawer inside Modal, div or any container not just htmlBody

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Opens Drawer where ever developers want, not just html 's body

What does the proposed API look like?

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Drawer, Button, Modal, Form } from "antd";

class App extends React.Component {
  state = {
    visibleDrawer: false,
    visibleModal: false
  };

  showDrawer = () => {
    this.setState({
      visibleDrawer: true
    });
  };

  onClose = () => {
    this.setState({
      visibleDrawer: false
    });
  };

  showModal = () => {
    this.setState({
      visibleModal: true
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visibleModal: false
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visibleModal: false
    });
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visibleModal}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Button type="primary" onClick={this.showDrawer}>
            Open Drawer
          </Button>
          <Form>
            <Form.Item>
              <Drawer
                title="Basic Drawer"
                placement="right"
                closable={this.state.visibleDrawer}
                onClose={this.onClose}
                visible={this.state.visibleDrawer}
              >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
              </Drawer>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

[ccaseiro]

Hi, you need to use both getContainer and also style the Drawer with relative postion. I’m using React Hooks to get myRef in the example below:

      <div ref={myElem} />
      <Drawer
        visible={showDrawer}
        placement="top"
        onClose={toggleDrawer}
        getContainer={() => myElem.current}
        style={{ position: "relative", zIndex: 90 }}
      >
        <div>test</div>
      </Drawer>

[jljsj33]

<div id="drawer-container" >
  <Drawer getContainer={false}/>
</div>