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.
*/