From 20a5899c7d4192d0ffb695366f3db3a090de0610 Mon Sep 17 00:00:00 2001
From: Murtuza Zabuawala <murtuza.zabuawala@enterprisedb.com>
Date: Fri, 12 Jul 2019 10:06:30 +0100
Subject: [PATCH] Fix some minor UI issues on IE11. Fixes #4462

Includes some Jasmine test case fixes from Ganesh.
---
 docs/en_US/release_notes_4_11.rst             |  3 ++-
 web/pgadmin/static/js/backgrid.pgadmin.js     |  5 ++++
 web/pgadmin/static/scss/_pgadmin.style.scss   | 11 +++++++++
 .../javascript/dialog_tab_navigator_spec.js   | 23 ++++++++++++-------
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/docs/en_US/release_notes_4_11.rst b/docs/en_US/release_notes_4_11.rst
index e59f6c6d4..30746e937 100644
--- a/docs/en_US/release_notes_4_11.rst
+++ b/docs/en_US/release_notes_4_11.rst
@@ -34,4 +34,5 @@ Bug fixes
 | `Issue #4429 <https://redmine.postgresql.org/issues/4429>`_ -  Ensure drag/drop from the treeview works as expected on Firefox.
 | `Issue #4437 <https://redmine.postgresql.org/issues/4437>`_ -  Fix table icon issue when updating any existing field.
 | `Issue #4442 <https://redmine.postgresql.org/issues/4442>`_ -  Ensure browser should not be started by Selenium when feature tests are excluded from a test run.
-| `Issue #4450 <https://redmine.postgresql.org/issues/4450>`_ -  Fix reverse engineered sql for Foreign Data Wrapper created on EPAS server in redwood mode.
\ No newline at end of file
+| `Issue #4450 <https://redmine.postgresql.org/issues/4450>`_ -  Fix reverse engineered sql for Foreign Data Wrapper created on EPAS server in redwood mode.
+| `Issue #4462 <https://redmine.postgresql.org/issues/4462>`_ -  Fix some minor UI issues on IE11.
\ No newline at end of file
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 0d968aa9b..8275138d3 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -206,6 +206,11 @@ define([
             if(cell && cell.$el.hasClass('edit-cell') &&
               !cell.$el.hasClass('privileges') || cell.$el.hasClass('delete-cell')) {
               model.trigger('backgrid:next', m, n, false);
+              if(cell.$el.hasClass('delete-cell')) {
+                setTimeout(function(){
+                  $(cell.$el).trigger('focus');
+                }, 50);
+              }
               break;
             } else if (renderable && editable) {
               cell.enterEditMode();
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 8f1e248d8..082e82ca6 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -741,6 +741,17 @@ table tr td {
   }
 }
 
+/* Specific to IE11 where we want to highlight the focus on grid buttons */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  table tr td {
+    td.edit-cell:focus,
+    td.delete-cell:focus,
+    td.string-cell:focus {
+      border: 2px solid $input-focus-border-color !important;;
+    }
+  }
+}
+
 .privilege_label{
   font-size: 10px!important;
 }
diff --git a/web/regression/javascript/dialog_tab_navigator_spec.js b/web/regression/javascript/dialog_tab_navigator_spec.js
index 8e86fc87b..60e4bdd2e 100644
--- a/web/regression/javascript/dialog_tab_navigator_spec.js
+++ b/web/regression/javascript/dialog_tab_navigator_spec.js
@@ -11,7 +11,7 @@ import $ from 'jquery';
 import 'bootstrap';
 
 describe('dialogTabNavigator', function () {
-  let dialog, tabNavigator, backward_shortcut, forward_shortcut;
+  let dialog, tabNavigator, backward_shortcut, forward_shortcut, fakeEvent;
 
   beforeEach(() => {
     dialog = $('<div tabindex="1" class="backform-tab" role="tabpanel">'+
@@ -68,6 +68,9 @@ describe('dialogTabNavigator', function () {
 
     tabNavigator = new dialogTabNavigator.dialogTabNavigator(
       dialog, backward_shortcut, forward_shortcut);
+
+    fakeEvent = { stopPropagation: () => true };
+
   });
 
   describe('navigate', function () {
@@ -79,7 +82,7 @@ describe('dialogTabNavigator', function () {
     });
 
     it('navigate backward', function () {
-      tabNavigator.onKeyboardEvent({}, 'shift+ctrl+[');
+      tabNavigator.onKeyboardEvent(fakeEvent, 'shift+ctrl+[');
 
       expect(tabNavigator.navigateBackward).toHaveBeenCalled();
 
@@ -88,7 +91,7 @@ describe('dialogTabNavigator', function () {
     });
 
     it('navigate forward', function () {
-      tabNavigator.onKeyboardEvent({}, 'shift+ctrl+]');
+      tabNavigator.onKeyboardEvent(fakeEvent, 'shift+ctrl+]');
 
       expect(tabNavigator.navigateForward).toHaveBeenCalled();
 
@@ -97,7 +100,7 @@ describe('dialogTabNavigator', function () {
     });
 
     it('should not navigate', function () {
-      tabNavigator.onKeyboardEvent({}, 'shift+ctrl+a');
+      tabNavigator.onKeyboardEvent(fakeEvent, 'shift+ctrl+a');
 
       expect(tabNavigator.navigateForward).not.toHaveBeenCalled();
 
@@ -115,7 +118,8 @@ describe('dialogTabNavigator', function () {
 
       navigateForwardResult = tabNavigator.navigateForward(
         dialog.find('ul.nav-tabs:first'),
-        dialog.find('div#1')
+        dialog.find('div#1'),
+        fakeEvent
       );
     });
 
@@ -141,7 +145,8 @@ describe('dialogTabNavigator', function () {
 
       navigateForwardResult = tabNavigator.navigateForward(
         dialog.find('ul.nav-tabs:first'),
-        dialog.find('div#1')
+        dialog.find('div#1'),
+        fakeEvent
       );
     });
 
@@ -165,7 +170,8 @@ describe('dialogTabNavigator', function () {
 
       navigateBackwardResult = tabNavigator.navigateBackward(
         dialog.find('ul.nav-tabs:first'),
-        dialog.find('div#1')
+        dialog.find('div#1'),
+        fakeEvent
       );
     });
 
@@ -184,7 +190,8 @@ describe('dialogTabNavigator', function () {
 
       navigateBackwardResult = tabNavigator.navigateBackward(
         dialog.find('ul.nav-tabs:first'),
-        dialog.find('div#1')
+        dialog.find('div#1'),
+        fakeEvent
       );
     });