debug what the browsers do

Author: eps1lon

packages/material-ui/src/Modal/Modal.test.js

@@ -3,7 +3,6 @@ import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
 import { useFakeTimers, spy } from 'sinon';
 import PropTypes from 'prop-types';
-import { fireEvent as fireDOMEvent } from '@testing-library/dom';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { createClientRender, fireEvent, within } from 'test/utils/createClientRender';
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -508,7 +507,7 @@ describe('<Modal />', () => {
       );
     });
 
-    it('should loop the tab key', () => {
+    it.only('should loop the tab key', () => {
       render(
         <Modal open>
           <div data-testid="modal">
@@ -520,17 +519,17 @@ describe('<Modal />', () => {
         </Modal>,
       );
 
-      fireDOMEvent.keyDown(document.activeElement, {
+      fireEvent.keyDown(document.activeElement, {
         keyCode: 13, // Enter
       });
-      fireDOMEvent.keyDown(document.activeElement, {
+      fireEvent.keyDown(document.activeElement, {
         keyCode: 9, // Tab
       });
 
       expect(document.querySelector('[data-test="sentinelStart"]')).toHaveFocus();
 
       initialFocus.focus();
-      fireDOMEvent.keyDown(document.activeElement, {
+      fireEvent.keyDown(document.activeElement, {
         keyCode: 9, // Tab
         shiftKey: true,
       });

packages/material-ui/src/Modal/TrapFocus.js

@@ -83,6 +83,8 @@ function TrapFocus(props) {
     };
 
     const loopFocus = (event) => {
+      console.log(`handledEvent.keyCode = (${typeof event.keyCode})${event.keyCode}`);
+
       // 9 = Tab
       if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {
         return;

test/utils/createClientRender.js

@@ -93,11 +93,13 @@ export function createClientRender(globalOptions = {}) {
 }
 
 const fireEvent = Object.assign(rtlFireEvent, {
-  // polyfill event.key for chrome 49 (supported in Material-UI v4)
+  // polyfill event.key(Code) for chrome 49 and edge 15 (supported in Material-UI v4)
   // for user-interactions react does the polyfilling but manually created
   // events don't have this luxury
   keyDown(element, options = {}) {
     const event = createEvent.keyDown(element, options);
+    console.log(`options.keyCode = (${typeof options.keyCode})${options.keyCode}`);
+    console.log(`dispatchedEvent.keyCode = (${typeof event.keyCode})${event.keyCode}`);
     Object.defineProperty(event, 'key', {
       get() {
         return options.key || '';