From 801d9e7f1b3a4720718362194f651e11e1f6818d Mon Sep 17 00:00:00 2001
From: AshishKapoor <AshishKapoor@users.noreply.github.com>
Date: Thu, 3 Feb 2022 07:56:21 +0530
Subject: [PATCH] [Web Console] fix deprecated keyboard event method "keyCode"
 with "key" (#11947)

* 11946 fix keyboard event keyCode method

* fix with key and respective cases

* e.which method required since it's anyway deprecated too.

* updated as per feedback
---
 web-console/src/bootstrap/react-table-custom-pagination.tsx | 2 +-
 web-console/src/entry.ts                                    | 2 +-
 .../column-rename-input/column-rename-input.tsx             | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-console/src/bootstrap/react-table-custom-pagination.tsx b/web-console/src/bootstrap/react-table-custom-pagination.tsx
index 92465fd7576..bcc900f130c 100644
--- a/web-console/src/bootstrap/react-table-custom-pagination.tsx
+++ b/web-console/src/bootstrap/react-table-custom-pagination.tsx
@@ -123,7 +123,7 @@ export class ReactTableCustomPagination extends React.PureComponent<
                   value={tempPage || String(page + 1)}
                   onBlur={this.applyTempPage}
                   onKeyPress={e => {
-                    if (e.which === 13 || e.keyCode === 13) {
+                    if (e.key === 'Enter') {
                       this.applyTempPage(e);
                     }
                   }}
diff --git a/web-console/src/entry.ts b/web-console/src/entry.ts
index b108db412a3..675d5730bce 100644
--- a/web-console/src/entry.ts
+++ b/web-console/src/entry.ts
@@ -108,7 +108,7 @@ ReactDOM.render(
 let mode: 'mouse' | 'tab' = 'mouse';
 
 function handleTab(e: KeyboardEvent) {
-  if (e.keyCode !== 9) return;
+  if (e.key !== 'Tab') return;
   if (mode === 'tab') return;
   mode = 'tab';
   document.body.classList.remove('mouse-mode');
diff --git a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx b/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
index d8870d86827..4a6f5fae896 100644
--- a/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
+++ b/web-console/src/views/query-view/query-output/column-rename-input/column-rename-input.tsx
@@ -44,12 +44,12 @@ export const ColumnRenameInput = React.memo(function ColumnRenameInput(
       value={newName}
       onChange={(e: any) => setNewName(e.target.value)}
       onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-        switch (e.keyCode) {
-          case 13: // Enter
+        switch (e.key) {
+          case 'Enter':
             maybeDone();
             break;
 
-          case 27: // Esc
+          case 'Escape':
             onDone();
             break;
         }