diff --git a/specs/Modal.events.spec.js b/specs/Modal.events.spec.js index 0e61c1bf..8c9d5f2b 100644 --- a/specs/Modal.events.spec.js +++ b/specs/Modal.events.spec.js @@ -11,7 +11,9 @@ import { mouseDownAt, mouseUpAt, escKeyDown, + escKeyDownWithCode, tabKeyDown, + tabKeyDownWithCode, withModal, withElementCollector, createHTMLElement @@ -109,6 +111,23 @@ export default () => { }); }); + it("traps tab in the modal on shift + tab with KeyboardEvent.code", () => { + const topButton = ; + const bottomButton = ; + const modalContent = ( +
+ {topButton} + {bottomButton} +
+ ); + const props = { isOpen: true }; + withModal(props, modalContent, modal => { + const content = mcontent(modal); + tabKeyDownWithCode(content, { shiftKey: true }); + document.activeElement.textContent.should.be.eql("bottom"); + }); + }); + describe("shouldCloseOnEsc", () => { context("when true", () => { it("should close on Esc key event", () => { @@ -129,6 +148,25 @@ export default () => { } ); }); + + it("should close on Esc key event with KeyboardEvent.code", () => { + const requestCloseCallback = sinon.spy(); + withModal( + { + isOpen: true, + shouldCloseOnEsc: true, + onRequestClose: requestCloseCallback + }, + null, + modal => { + escKeyDownWithCode(mcontent(modal)); + requestCloseCallback.called.should.be.ok(); + // Check if event is passed to onRequestClose callback. + const event = requestCloseCallback.getCall(0).args[0]; + event.should.be.ok(); + } + ); + }); }); context("when false", () => { diff --git a/specs/helper.js b/specs/helper.js index 9ff09c84..825b5510 100644 --- a/specs/helper.js +++ b/specs/helper.js @@ -182,9 +182,9 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) => {}, { key: key, - keyCode: code, which: code }, + code, opts ) ); @@ -192,13 +192,31 @@ const dispatchMockEvent = eventCtor => (key, code) => (element, opts) => const dispatchMockKeyDownEvent = dispatchMockEvent(Simulate.keyDown); /** - * Dispatch an 'esc' key down event from an element. + * @deprecated will be replaced by `escKeyDownWithCode` when `react-modal` + * drops support for React <18. + * + * Dispatch an 'esc' key down event using the legacy KeyboardEvent.keyCode. + */ +export const escKeyDown = dispatchMockKeyDownEvent("ESC", { keyCode: 27 }); +/** + * Dispatch an 'esc' key down event. + */ +export const escKeyDownWithCode = dispatchMockKeyDownEvent("ESC", { + code: "Escape" +}); +/** + * @deprecated will be replaced by `escKeyDownWithCode` when `react-modal` + * drops support for React <18. + * + * Dispatch a 'tab' key down event using the legacy KeyboardEvent.keyCode. */ -export const escKeyDown = dispatchMockKeyDownEvent("ESC", 27); +export const tabKeyDown = dispatchMockKeyDownEvent("TAB", { keyCode: 9 }); /** - * Dispatch a 'tab' key down event from an element. + * Dispatch a 'tab' key down event. */ -export const tabKeyDown = dispatchMockKeyDownEvent("TAB", 9); +export const tabKeyDownWithCode = dispatchMockKeyDownEvent("TAB", { + code: "Tab" +}); /** * Dispatch a 'click' event at a node. */