[Modal] Ignore if the event prevent default is called (#12202)

mui · Jul 20, 2018 · 4bf97b5 · 4bf97b5
1 parent a207808
commit 4bf97b5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 39 deletions.
diff --git a/packages/material-ui/src/ButtonBase/createRippleHandler.js b/packages/material-ui/src/ButtonBase/createRippleHandler.js
@@ -6,6 +6,7 @@ function createRippleHandler(instance, eventName, action, cb) {
 
  let ignore = false;
 
+ // Ignore events that have been `event.preventDefault()` marked.
  if (event.defaultPrevented) {
  ignore = true;
  }

diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -159,6 +159,11 @@ class Modal extends React.Component {
  return;
  }
 
+ // Ignore events that have been `event.preventDefault()` marked.
+ if (event.defaultPrevented) {
+ return;
+ }
+
  if (this.props.onEscapeKeyDown) {
  this.props.onEscapeKeyDown(event);
  }

diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
@@ -249,24 +249,19 @@ describe('<Modal />', () => {
  describe('handleDocumentKeyDown()', () => {
  let wrapper;
  let instance;
- let onEscapeKeyDownStub;
- let onCloseStub;
+ let onEscapeKeyDownSpy;
+ let onCloseSpy;
  let topModalStub;
  let event;
 
  beforeEach(() => {
- wrapper = shallow(<Modal open={false} />);
- instance = wrapper.instance();
- onEscapeKeyDownStub = stub().returns(true);
- onCloseStub = stub().returns(true);
+ onEscapeKeyDownSpy = spy();
+ onCloseSpy = spy();
  topModalStub = stub();
- wrapper.setProps({ onEscapeKeyDown: onEscapeKeyDownStub, onClose: onCloseStub });
- });
-
- afterEach(() => {
- onEscapeKeyDownStub.reset();
- onCloseStub.reset();
- topModalStub.reset();
+ wrapper = shallow(
+ <Modal open={false} onEscapeKeyDown={onEscapeKeyDownSpy} onClose={onCloseSpy} />,
+ );
+ instance = wrapper.instance();
  });
 
  it('should have handleDocumentKeyDown', () => {
@@ -275,66 +270,66 @@ describe('<Modal />', () => {
  });
 
  it('when not mounted should not call onEscapeKeyDown and onClose', () => {
- instance = wrapper.instance();
- instance.mounted = false;
  instance.handleDocumentKeyDown(undefined);
- assert.strictEqual(onEscapeKeyDownStub.callCount, 0);
- assert.strictEqual(onCloseStub.callCount, 0);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
+ assert.strictEqual(onCloseSpy.callCount, 0);
  });
 
  it('when mounted and not TopModal should not call onEscapeKeyDown and onClose', () => {
- topModalStub.returns('false');
+ topModalStub.returns(false);
  wrapper.setProps({ manager: { isTopModal: topModalStub } });
- instance = wrapper.instance();
- instance.mounted = true;
 
  instance.handleDocumentKeyDown(undefined);
  assert.strictEqual(topModalStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.callCount, 0);
- assert.strictEqual(onCloseStub.callCount, 0);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
+ assert.strictEqual(onCloseSpy.callCount, 0);
  });
 
  it('when mounted, TopModal and event not esc should not call given funcs', () => {
  topModalStub.returns(true);
  wrapper.setProps({ manager: { isTopModal: topModalStub } });
- instance = wrapper.instance();
- instance.mounted = true;
  event = { keyCode: keycode('j') }; // Not 'esc'
 
  instance.handleDocumentKeyDown(event);
  assert.strictEqual(topModalStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.callCount, 0);
- assert.strictEqual(onCloseStub.callCount, 0);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
+ assert.strictEqual(onCloseSpy.callCount, 0);
  });
 
  it('should call onEscapeKeyDown and onClose', () => {
  topModalStub.returns(true);
  wrapper.setProps({ manager: { isTopModal: topModalStub } });
  event = { keyCode: keycode('esc') };
- instance = wrapper.instance();
- instance.mounted = true;
 
  instance.handleDocumentKeyDown(event);
  assert.strictEqual(topModalStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.calledWith(event), true);
- assert.strictEqual(onCloseStub.callCount, 1);
- assert.strictEqual(onCloseStub.calledWith(event), true);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 1);
+ assert.strictEqual(onEscapeKeyDownSpy.calledWith(event), true);
+ assert.strictEqual(onCloseSpy.callCount, 1);
+ assert.strictEqual(onCloseSpy.calledWith(event), true);
  });
 
  it('when disableEscapeKeyDown should call only onClose', () => {
  topModalStub.returns(true);
- wrapper.setProps({ manager: { isTopModal: topModalStub } });
- wrapper.setProps({ disableEscapeKeyDown: true });
+ wrapper.setProps({ disableEscapeKeyDown: true, manager: { isTopModal: topModalStub } });
  event = { keyCode: keycode('esc') };
- instance = wrapper.instance();
- instance.mounted = true;
 
  instance.handleDocumentKeyDown(event);
  assert.strictEqual(topModalStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.callCount, 1);
- assert.strictEqual(onEscapeKeyDownStub.calledWith(event), true);
- assert.strictEqual(onCloseStub.callCount, 0);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 1);
+ assert.strictEqual(onEscapeKeyDownSpy.calledWith(event), true);
+ assert.strictEqual(onCloseSpy.callCount, 0);
+ });
+
+ it('should not be call when defaultPrevented', () => {
+ topModalStub.returns(true);
+ wrapper.setProps({ disableEscapeKeyDown: true, manager: { isTopModal: topModalStub } });
+ event = { keyCode: keycode('esc'), defaultPrevented: true };
+
+ instance.handleDocumentKeyDown(event);
+ assert.strictEqual(topModalStub.callCount, 1);
+ assert.strictEqual(onEscapeKeyDownSpy.callCount, 0);
+ assert.strictEqual(onCloseSpy.callCount, 0);
  });
  });