CODEWITHSUNDEEP
javascriptcssreactjsmodal-dialogevent-bubbling
Ryan Peschel
Ryan Peschel

Reputation: 11828

How to prevent modal click-through?

I have a modal that looks something like this:

<div className="modal modal-focuser" tabindex="1" style="z-index: 5;">
  <div className="handle-modal-close"></div>
  <div className="modal-content modal-content">
    <div className="body">
      <span>
        <div className="container">
          <div className="title-text">Title Text</div>
          <div className="body-text">Body Text</div>
        </div>
        <button onClick={this.toggleView} className="toggle-view">Switch View</button>
      </span>
    </div>
  </div>
</div>

With the click code like the following:

toggleView = e => {
  e.stopPropagation();

  this.setState(prevState => ({ view: !prevState.view}));
}

But for some reason (despite the stop propagation), when I click the button, sometimes the parent's event handlers are still being activated.

That is, there is a table behind the modal with click-able rows, and when I click the Toggle button in the modal, not only is that button clicked, but also the table row behind the behind (which also has its own click event handlers)

The stranger thing is that this only sometimes happens, and only happens on mobile. Try as I might, I can't replicate the behavior on my PC in Chrome or Firefox.

What could be causing this?

Upvotes: 0

Views: 2775

Answers (1)

bob
bob

Reputation: 7985

You're using the onclick handler, which essentially ignores all the propegation through down-up events. Try using onmousedown. Chances are the thing underneath the modal has a down or up event. Learn about "bubbling" : What is event bubbling and capturing?

<button onMouseDown={this.toggleView} ... yada yada

Using the mousedown will allow you to prevent bubbling through the stopPropegation, and maybe also look into stopImmediatePropegation -- which prevents other listeners of the same type (click, down, up) from getting called: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

Upvotes: -1

Related Questions