Presssing Esc/Enter in popups closes dialog

[samueldjack]

I'm submitting a feature request

• Library Version:
  1.0.0-rc.1.0.3

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  8.1.2

• NPM Version:
  5.0.6

• JSPM OR Webpack AND Version
  webpack 3.0.0

• Browser:
  Chrome 59

• Language:
  TypeScript 2.2

Current behavior:
If I have a popup open in my dialog and I press Escape or Enter to close it then the dialog itself gets closed too.

Expected/desired behavior:

• What is the expected behavior?
  Only the popup should close; the dialog itself should stay open.

I can think of two ways of achieving this:

1. Handle the event in the popup and use Event.stopPropagation().
2. Make the dialog respect the built in Event.defaultPrevented() (which appears to be synonymous with Event.Handled from the WPF/Windows Forms world) and call Event.preventDefault in a popup event handler.

Option 1 seems rather heavy handed as elements higher up the tree don't even get to find out that the event has happened. Option 2 requires a more cooperative approach, but wouldn't break any other code expecting to receive events.

[StrahilKazlachev]

I feel somewhat reluctant using .preventDefault as a mechanism to signal the dialog, in particular the Renderer, that it should ignore an event. I'm more for marking such events with our own marker - Symbol.for('ux-ignore-event') or something like that.

[davismj]

I think you need to go with 1 here. Event.defaultPrevented() is not the same as Event.stopPropagation().

From MDN, preventDefault()

The Event interface's preventDefault() method tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be. The event continues to propagate as usual with only the exception that the event does nothing if no event listeners call stopPropagation(), which terminates propagation at once.

stopPropagation() on MDN

Prevents further propagation of the current event in the capturing and bubbling phases.

preventDefault is a complementary method that can be used to prevent the default action of the event from happening.

The key word here is "user agent," i.e. the browser. In other words, preventDefault() is a good way to tell the browser not to check a checkbox when a checkbox is clicked. stopPropagation() is a good way of handling logic in your application that says "I've already handled this function and it doesn't need to go any further." Your use case above warrants the latter.

[Alexander-Taran]

@bigopon

async triageQuestion(id) =>{
 respondSameDay()
 let response = await getResponseFromOP( { timeout : fromYears(5) } )
 if(!response) {
    closeQuestion(id,randomReason())
 }
}