From a8387c9d9150797e4a6c045547a2b9b609a162f6 Mon Sep 17 00:00:00 2001
From: Guillaume Peoc'h <guillaume.peoch@sonarsource.com>
Date: Wed, 8 Jun 2022 17:48:30 +0200
Subject: [PATCH] [NO JIRA] Changing window to document for EventListerner

---
 .../js/app/components/KeyboardShortcutsModal.tsx | 16 ++++++++--------
 .../__tests__/KeyboardShortcutsModal-test.tsx    | 12 ++++++------
 .../components/HotspotViewerTabs.tsx             |  4 ++--
 server/sonar-web/src/main/js/helpers/keycodes.ts |  3 ++-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
index 1a92d7b6551..03b486af054 100644
--- a/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
+++ b/server/sonar-web/src/main/js/app/components/KeyboardShortcutsModal.tsx
@@ -20,6 +20,8 @@
 import * as React from 'react';
 import { Button } from '../../components/controls/buttons';
 import Modal from '../../components/controls/Modal';
+import { isInput } from '../../helpers/keyboardEventHelpers';
+import { KeyboardKeys } from '../../helpers/keycodes';
 import { translate } from '../../helpers/l10n';
 
 type Shortcuts = Array<{
@@ -129,22 +131,20 @@ export default function KeyboardShortcutsModal() {
   const [display, setDisplay] = React.useState(false);
 
   React.useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      const { tagName } = event.target as HTMLElement;
-
-      if (['INPUT', 'SELECT', 'TEXTAREA'].includes(tagName)) {
-        return; // Ignore keys when typed in an input
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isInput(event)) {
+        return true;
       }
 
-      if (event.key === '?') {
+      if (event.key === KeyboardKeys.KeyQuestionMark) {
         setDisplay(d => !d);
       }
     };
 
-    window.addEventListener('keypress', handleKeyPress);
+    document.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      window.removeEventListener('keypress', handleKeyPress);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   }, [setDisplay]);
 
diff --git a/server/sonar-web/src/main/js/app/components/__tests__/KeyboardShortcutsModal-test.tsx b/server/sonar-web/src/main/js/app/components/__tests__/KeyboardShortcutsModal-test.tsx
index 5c3967754d8..4727c3deb92 100644
--- a/server/sonar-web/src/main/js/app/components/__tests__/KeyboardShortcutsModal-test.tsx
+++ b/server/sonar-web/src/main/js/app/components/__tests__/KeyboardShortcutsModal-test.tsx
@@ -46,36 +46,36 @@ it('should render correctly', () => {
   const wrapper = shallowRender();
   expect(wrapper).toMatchSnapshot('hidden');
 
-  window.dispatchEvent(new KeyboardEvent('keypress', { key: '?' }));
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: '?' }));
 
   expect(wrapper).toMatchSnapshot('visible');
 });
 
 it('should close correctly', () => {
   const wrapper = shallowRender();
-  window.dispatchEvent(new KeyboardEvent('keypress', { key: '?' }));
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: '?' }));
 
   wrapper.find(Modal).props().onRequestClose!(mockEvent());
 
   expect(wrapper.type()).toBeNull();
 });
 
-it('should ignore other keypresses', () => {
+it('should ignore other keydownes', () => {
   const wrapper = shallowRender();
-  window.dispatchEvent(new KeyboardEvent('keypress', { key: '!' }));
+  document.dispatchEvent(new KeyboardEvent('keydown', { key: '!' }));
   expect(wrapper.type()).toBeNull();
 });
 
 it.each([['input'], ['select'], ['textarea']])('should ignore events on a %s', type => {
   const wrapper = shallowRender();
 
-  const fakeEvent = new KeyboardEvent('keypress', { key: '!' });
+  const fakeEvent = new KeyboardEvent('keydown', { key: '!' });
 
   Object.defineProperty(fakeEvent, 'target', {
     value: document.createElement(type)
   });
 
-  window.dispatchEvent(fakeEvent);
+  document.dispatchEvent(fakeEvent);
 
   expect(wrapper.type()).toBeNull();
 });
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
index 996ea790cd4..100a42eb9de 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotViewerTabs.tsx
@@ -100,11 +100,11 @@ export default class HotspotViewerTabs extends React.PureComponent<Props, State>
   };
 
   registerKeyboardEvents() {
-    window.addEventListener('keydown', this.handleKeyboardNavigation);
+    document.addEventListener('keydown', this.handleKeyboardNavigation);
   }
 
   unregisterKeyboardEvents() {
-    window.removeEventListener('keydown', this.handleKeyboardNavigation);
+    document.removeEventListener('keydown', this.handleKeyboardNavigation);
   }
 
   handleSelectTabs = (tabKey: TabKeys) => {
diff --git a/server/sonar-web/src/main/js/helpers/keycodes.ts b/server/sonar-web/src/main/js/helpers/keycodes.ts
index c222a202457..f061e98713c 100644
--- a/server/sonar-web/src/main/js/helpers/keycodes.ts
+++ b/server/sonar-web/src/main/js/helpers/keycodes.ts
@@ -51,5 +51,6 @@ export enum KeyboardKeys {
   KeyI = 'i',
   KeyC = 'c',
   KeyT = 't',
-  KeyS = 's'
+  KeyS = 's',
+  KeyQuestionMark = '?'
 }
-- 
2.39.5