jossmac / react-images

🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
http://jossmac.github.io/react-images
MIT License
2.34k stars 440 forks source link

closeOnBackdropClick without carousel component #307

Open alenart91 opened 5 years ago

alenart91 commented 5 years ago

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?

luandro commented 5 years ago

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 :)