Automate react stopPropagation and preventDefault
Asked Answered
C

0

6

Using current versions of react-dom and @material-ui, I need to stopPropagation and/or preventDefault in quite a few places. I've never ran into a problem like in this article and I guess, it can't happen because of how Material-UI works: AFAIK open dialogs and modals get the event first, so they get always closed, when clicking outside.

  • Am I right with this assumption?

  • If so, are there still cases, when I should not stopPropagation and/or preventDefault?

Anyway, I'm tired of complicating all event handlers by this boilerplate. I'd like to automate this, is it possible?

Update

I'm not providing an example, where stopPropagation is necessary, as it can't help (we all know it's needed sometimes, don't we?). It has happened to me several times, e.g., clicking a close button in a MUI Popover forwarded the click to the button which opened the popover (so it stayed open).

Note that the question has three parts. If there's no automated solution (I'd bet, React itself could do it), I'm most curious about cases where the suppression should not happen when using MUI.

Cameron answered 17/6, 2020 at 12:45 Comment(6)
It would be helpful if you included a code example of the type of scenarios in which you're using stopPropagation and preventDefault. I'm confused as to why you would have this kind of "boilerplate" in a lot of event handlers. I certainly wouldn't expect to need it so often as to want to automate it.Euphrasy
Take a look at this: stackoverflow.com/questions/21724219Rubenstein
Material's modal uses a portal, they never leak to the rest of the application. Why do you need to call them so often?Pasta
@Pasta Not really often, but sometimes. And it's always something what I have to check for... needless source of bugs. Assuming it's correct and it can be automated, I'd like to do do it always.Cameron
"Not really often, but sometimes" -> what would happen in cases where you actually don't want to stop propagation or prevent default? I'd be curious why you need to call these so often? Anecdotally, I rarely need to call these functions in React. Preventing default on a form submission is the one case that I use quite often.Undersurface
@RossAllen I could imagine something like doNotStopPropagation for this case. I use no forms, so I don't have your use case. It's not often, it's surprisingly (see my example in the section "Update"). The non-closing dialog was trivial to spot and trivial to fix, but having zero such problems would be much better.Cameron

© 2022 - 2024 — McMap. All rights reserved.