react-images icon indicating copy to clipboard operation
react-images copied to clipboard

closeOnBackdropClick without carousel component

Open alenart91 opened this issue 5 years ago • 1 comments

I'm currently using the library in multiple places on my site with no issues. However when using the modal without the carousel component I can't get closeOnBackdropClick to work. I'm using the modal to display a form.

<ModalGateway>
               {this.state.formOpen ? (
                 <Modal onClose = {this.closeForm} >
                 <div className = "view">
                  <p onClick = {this.closeForm}>X</p>
                  <form action="apistuff" method="POST" target="_blank">
                  <input type="email" name="email" placeholder="enter your email" />
                  <input type="text" name="name" placeholder="enter your name" />
                  <button>Submit</button>
                  </form>
                  </div>
                 </Modal>
               ) : null}
             </ModalGateway>

Looking in react dev tools it is set to true and and pressing the esc key closes the modal just fine. Has anyone come across this issue before?

alenart91 avatar Aug 08 '19 09:08 alenart91

I'm having the same problem. Tried adding my own "click outside" within the modal to force close, but as soon as I dispatch the close() function the modal automatically re-opens... Seems to be something withing the modal component's own state control.

I'm also having this problem with the Carousel component.

update Seems to be similar too #302 and #303 seems to fix the problem. I also noticed the depending where the component is placed "backdrop closing" doesn't seem to work.

Please @jossmac would be nice to merge :)

luandro avatar Aug 13 '19 13:08 luandro