feat(Modal): Prevent onHide when keyboard event defaultPrevented is t…

…rue (#816)

src/Modal.tsx

@@ -281,7 +281,10 @@ const Modal: React.ForwardRefExoticComponent<
  const handleDocumentKeyDown = useEventCallback((e: KeyboardEvent) => {
  if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
  onEscapeKeyDown?.(e);
- onHide();
+
+ if (!e.defaultPrevented) {
+ onHide();
+ }
  }
  });
 
@@ -421,6 +424,8 @@ const propTypes = {
 
  /**
  * A callback fired when the escape key, if specified in `keyboard`, is pressed.
+ *
+ * If preventDefault() is called on the keyboard event, closing the modal will be cancelled.
  */
  onEscapeKeyDown: PropTypes.func,
 

test/ModalSpec.js

@@ -202,6 +202,25 @@ describe('<Modal>', () => {
  simulant.fire(backdrop, 'keydown', { keyCode: 27 });
  });
 
+ it('should not trigger onHide if e.preventDefault() called', () => {
+ const onHideSpy = sinon.spy();
+ const onEscapeKeyDown = (e) => {
+ e.preventDefault();
+ };
+
+ let ref = mountWithRef(
+ <Modal show onHide={onHideSpy} onEscapeKeyDown={onEscapeKeyDown}>
+ <strong>Message</strong>
+ </Modal>,
+ { attachTo },
+ );
+
+ let { backdrop } = ref.current;
+
+ simulant.fire(backdrop, 'keydown', { keyCode: 27 });
+ expect(onHideSpy).to.not.have.been.called;
+ });
+
  it('should add role to child', () => {
  let dialog;
  wrapper = mount(