Fixed query tool keyboard issue where arrow keys were not behaving as expected for execute options dropdown. Fixes #3298

docs/en_US/release_notes_3_1.rst

@@ -21,6 +21,7 @@ Bug fixes
 | `Bug #3257 <https://redmine.postgresql.org/issues/3257>`_ - Catch errors when trying to EXPLAIN an invalid query
 | `Bug #3284 <https://redmine.postgresql.org/issues/3284>`_ - F5 key should work to refresh Browser tree
 | `Bug #3290 <https://redmine.postgresql.org/issues/3290>`_ - Close button added to the alertify message box, which pops up in case of backend error
+| `Bug #3298 <https://redmine.postgresql.org/issues/3298>`_ - Fixed query tool keyboard issue where arrow keys were not behaving as expected for execute options dropdown
 | `Bug #3306 <https://redmine.postgresql.org/issues/3306>`_ - Fixed display SQL of table with index for Greenplum database
 | `Bug #3308 <https://redmine.postgresql.org/issues/3308>`_ - Fixed issue where icon for Partitioned tables was the same as Non Partitioned tables for Greenplum database
 | `Bug #3310 <https://redmine.postgresql.org/issues/3310>`_ - Fixed layout of the alertify error message in the query tool

web/pgadmin/static/js/keyboard_shortcuts.js

@@ -11,7 +11,11 @@ import $ from 'jquery';
 
 const PERIOD_KEY = 190,
   FWD_SLASH_KEY = 191,
-  ESC_KEY = 27;
+  ESC_KEY = 27,
+  LEFT_KEY = 37,
+  UP_KEY = 38,
+  RIGHT_KEY = 39,
+  DOWN_KEY = 40;
 
 function isMac() {
   return window.navigator.platform.search('Mac') != -1;
@@ -171,8 +175,54 @@ function keyboardShortcutsQueryTool(
   } else if(this.validateShortcutKeys(previousPanelKeys, event)) {
     this._stopEventPropagation(event);
     panel_id = this.getInnerPanel(sqlEditorController.container, 'left');
+  } else if(keyCode === UP_KEY || keyCode === DOWN_KEY) {
+    /*Apply only for dropdown*/
+    if($(event.target).closest('.dropdown-menu').length > 0) {
+      this._stopEventPropagation(event);
+      let currLi = $(event.target).closest('li');
+      /*close all the submenus on movement*/
+      $(event.target).closest('.dropdown-menu').find('.open').removeClass('open');
+
+      /*do not focus on divider*/
+      let isDivider = true;
+      while(isDivider) {
+        if(keyCode === UP_KEY) {
+          currLi = currLi.prev();
+        }
+        else if(keyCode === DOWN_KEY){
+          currLi = currLi.next();
+        }
+        if(!currLi.hasClass('divider')) {
+          isDivider = false;
+        }
+      }
+      currLi.find('a:first').focus();
+    }
+  } else if(keyCode === LEFT_KEY || keyCode === RIGHT_KEY) {
+    /*Apply only for dropdown*/
+    if($(event.target).closest('.dropdown-menu').length > 0) {
+      this._stopEventPropagation(event);
+      let currLi = $(event.target).closest('li');
+
+      if(keyCode === RIGHT_KEY) {
+        /*open submenu if any*/
+        if(currLi.hasClass('dropdown-submenu')){
+          currLi.addClass('open');
+          currLi = currLi.find('.dropdown-menu li:first-child');
+        }
+      } else if(keyCode === LEFT_KEY) {
+        /*close submenu*/
+        let currLiMenu = currLi.closest('.dropdown-menu');
+        if(currLiMenu.closest('.dropdown-submenu').length > 0) {
+          currLiMenu.closest('.dropdown-submenu').removeClass('open');
+          currLi = currLiMenu.closest('.dropdown-submenu');
+        }
+      }
+      currLi.find('a:first').focus();
+    }
   }
 
+
   return panel_id;
 }
 

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -154,21 +154,29 @@
                         <a id="btn-indent-code" href="#" tabindex="0">
                             <span> {{ _('Indent Selection (Tab)') }} </span>
                         </a>
+                    </li>
+                    <li>
                         <a id="btn-unindent-code" href="#" tabindex="0">
                             <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
                         </a>
+                    </li>
+                    <li>
                         <a id="btn-comment-line" href="#" tabindex="0">
                             <span> {{ _('Inline Comment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+/)') }}
                             {% else %}
                                  {{ _(' (Ctrl+/)') }}{%- endif %}</span>
                         </a>
+                    </li>
+                    <li>
                         <a id="btn-uncomment-line" href="#" tabindex="0">
                             <span> {{ _('Inline Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+.)') }}
                             {% else %}
                                  {{ _(' (Ctrl+.)') }}{%- endif %}</span>
                         </a>
+                    </li>
+                    <li>
                         <a id="btn-toggle-comment-block" href="#" tabindex="0">
                             <span> {{ _('Block Comment/Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Shift+Cmd+/)') }}
@@ -307,6 +315,8 @@
                         <a id="btn-clear" href="#" tabindex="0">
                             <span> {{ _('Clear Query Window') }} </span>
                         </a>
+                    </li>
+                    <li>
                         <a id="btn-clear-history" href="#" tabindex="0">
                             <span> {{ _('Clear History') }} </span>
                         </a>