Modal should capture all key presses while being open

[codeaid]

Steps

I have a login form with username and password fields and a submit button. When the form is submitted, an API call is made and if the response is not successful a Modal is displayed notifying the user.

The problem is - while the modal is being displayed, the cursor is still in the username/password field and if I press Enter hoping to close the modal it resubmits the form even though the modal is covering the whole page. I've not found an easy way to automatically focus on the button in the modal.

Expected Result

Modal/dimmer to capture key presses and act as a layer covering the whole page. At least give us an option which modal action to activate (default to) on open.

Actual Result

Dimmed modal is acting as if it's "transparent" even though it's covering the whole page and not capturing focus.

Version

0.68.5

Testcase

https://codepen.io/anon/pen/wewbjX

Open console, focus on the username field and press Enter multiple times. Watch form submission messages being logged on every Enter press.

Note

The same isssue is happening with the Form element if loading is set to true. One can keep submitting the form even though it's covered by the loading overlay.

Probably related to #1341.

[layershifter]

@levithomason commented on this before there and there. I agree with him, Modal shouldn't capture focus by default.

You can simply remove focus from Form in the handleFormSubmit, it will solve your issue. I will keep this issue opened before we'll get a response from @levithomason.

[levithomason]

https://codepen.io/anon/pen/JJdbjm

Add a button id

<Button id='my-button' color='green' inverted onClick={this.closeModal.bind(this)}>
  <Icon name='checkmark' /> Yes
</Button>

After the state change to open, focus the button

this.setState({
  open: true,
}, () => {
  // after modal opens, focus the modal button
  const $button = document.querySelector('#my-button')
  if ($button) $button.focus()
})

[codeaid]

@levithomason Isn't that a rather dirty solution having to use document.querySelector? I suppose I could use refs but it would be nice if there was a built-in functionality to specify which button/action to default to when the modal opens.

Also, for some reason the onOpen event isn't triggering in my case. I have the <Modal> element defined in my App component so that I can display global popups/alerts using Redux. It shows and hides if I change the open property but the onOpen never gets called. Any ideas what it could be?