Modal: Support configurable close behaviors

[brsanthu]

Modal should support disabling hiding the modal when user clicks outside the modal. This is useful when we are dealing with complicated form and we don't want user to lose the work if they accidentally clicks outside the modal.

[brsanthu]

If I have to take a look at this, how do I go about? Can you please give me some pointers?

[levithomason]

Appreciate you separating this from the other Modal issue. I'd merge this PR as well. How about:

<Modal closeOnClickOutside />
<Modal closeOnEscape />

Propose we default these to true as well.

[levithomason]

First, follow the CONTRIBUTING.md to get setup and understand the basics. Then,

Modal.js

  handleHide = () => {
    debug('handleHide()')
    // Always remove all dimmer classes.
    // If the dimmer value changes while the modal is open,
    //   then removing its current value could leave cruft classes previously added.
    document.body.classList.remove('blurring', 'dimmable', 'dimmed', 'scrollable')

    // == START PR == //
    // wrap these in if conditionals based on the proposed props above
    document.removeEventListener('keydown', this.handleDocumentKeyDown)
    document.removeEventListener('click', this.handleClickOutside)
    // == END PR == //
  }

See // == START PR == // comment above. Then also add/update tests in test/modules/Modal-test.js.

[levithomason]

Also, only remove the body classes if the modal actually closed.

[brsanthu]

Got it. Thx.