CODEWITHSUNDEEP
javascriptreactjs
Chris
Chris

Reputation: 31266

React-modal: dropzone activates file-explorer upon exit

I have a button that activates a modal on mouse-over nested inside a dropzone,

enter image description here

When I exit the modal by clicking (not escaping--escaping always works), the dropzone housing the button activates the file explorer, no matter where I click.

The modal is created using react-modal (not bootstrap), and the html reads: 

<Modal
    isOpen={props.state.show}

    onRequestClose={props.handleClose}
    shouldReturnFocusAfterClose={false}

    shouldCloseOnOverlayClick={true}
    shouldCloseOnEscape={true} >
    ...
 </Modal>

How do I avoid activating the dropzone (react-dropzone) when click-exiting the Modal?

Upvotes: 0

Views: 403

Answers (1)

Ankari
Ankari

Reputation: 619

The problem is, that the Modal adds an overlay that is (if looking at the DOM tree) inside the dropzone, so clicking on it means clicking in the dropzone which will trigger the default action for the dropzone, which is opening a file explorer.

The solution for you is the disableClick property of the react-dropzone. Since you already manage a state in which you control whether the modal is open, you can use that same variable to set the disableClick property to props.state.show for the dropzone which prevents opening the file explorer on clicks for the time the modal is open.

You can see examples of disableClick at: https://react-dropzone.js.org/#dropzone

Upvotes: 1

Related Questions