Clicking outside the modal the modal does not close

[tmohanta]

Is there anyway to close the modal when click outside the modal? Used maskClosable.

SomeModalWrapper.js import React from "react"; import { Modal, Button } from "antd"; import {DraggableModal} from 'ant-design-draggable-modal' import {DraggableModalProvider} from 'ant-design-draggable-modal'; class SomeModalWrapper extends React.Component { constructor(props) { super(props);

//this.state = {};

}

handleOk() { console.log("OK"); }

render() { const { modalVisible, toggleModal, onCancel } = this.props;

return (
  <DraggableModalProvider>
  <DraggableModal
    title="Some Title"
    visible={modalVisible}
    //width={300}
    //className=""
    onCancel={toggleModal}
    destroyOnClose={true}
    maskClosable={false}

  >
    // some other content
  </DraggableModal>
  </DraggableModalProvider>
);

} }

export default SomeModalWrapper;

index.js

import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Modal, Button } from "antd"; import {DraggableModal} from 'ant-design-draggable-modal' import SomeModalWrapper from "./SomeModalWrapper"; class App extends React.Component { state = { modalVisible: false };

toggleModal = () => { const { modalVisible } = this.state; console.log(modalVisible); this.setState({ modalVisible: !modalVisible }); };

render() { return (

Open Modal

);

} }

ReactDOM.render(, document.getElementById("container"));

[nikhilsarvaiye]

any plan on this defect fix?

[AmitAyalon]

I found a way around it, @tmohanta You need to use the 'useOnClickOutside' Hook and attach the 'ref' to the Modals Button.

After this, the Modal will close on any click within the screen even on the Modal itself, all you need to do next is add:

const ref = useRef(null); useOnClickOutside(ref, (e) => { if (e.target.closest('.ant-modal')) return; setVisible(false); });

return ( <>

Open Modal

  <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
    <p>Some contents...</p>
  </Modal>
</>

); Link for React Hook - https://usehooks.com/useOnClickOutside/

It worked for me, hope I helped 🙂