Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

event.stopPropagation() on a text input inside of a dialog should prevent the dialog from closing

See original GitHub issue

I have a <input /> and when I press ESC key, I want to restore the value and blur the input. The input is inside of a Dialog. So I don’t want the dialog to close when i hit ESC on the input. event.stopPropagation() in onKeyDown of the button should stop it since it’s a child a Dialog.

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

It should not close the dialog

Current Behavior

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Material-UI	^3.3.2
React	^16.6.0
Browser	Version 70.0.3538.77 (Official Build) (64-bit)
TypeScript	Babel
etc.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:10 (4 by maintainers)

Top GitHub Comments

1reaction

WillowHQcommented, Dec 4, 2018

I am going to take a look at this and see about submitting a fix.

0reactions

stevemaocommented, Nov 1, 2018

We might want to arbitrate on that point.

Yeah 👍

Do you think we should release that change in tha minor or a major? It can be considered a bug fix.

If you are paranoid/conservative (which is what a lot of people do nowadays) then it it’ll be a major. But I doubt if a lot of people are using event.preventDefault() and event.stopPropagation() and since this behaviour is not documented

Top Results From Across the Web

event.stopPropagation() on a text input inside of a dialog ...

I have a <input /> and when I press ESC key, I want to restore the value and blur the input . The...

Stop The Dialog From Closing When Clicked - Stack Overflow

I will close this question now, as I have found a solution to this problem. By adding event listener to the dialog itself,...

How to correctly use preventDefault(), stopPropagation(), or ...

Prevents the event from bubbling up the DOM, but does not stop the browsers default behaviour. For an in-depth explanation of event bubbling,...

Event.stopPropagation() - Web APIs | MDN

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

stopPropagation() Event Method - W3Schools

The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to ......