Hi Hackers,

PFA patch for query tool keyboard issue where arrow keys were not behaving
as expected for execute options dropdown. Also, corrected couple of
dropdown HTML codes.

Request you to kindly review.

Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"
diff --git a/web/pgadmin/static/js/keyboard_shortcuts.js b/web/pgadmin/static/js/keyboard_shortcuts.js
index b61365a..d772123 100644
--- a/web/pgadmin/static/js/keyboard_shortcuts.js
+++ b/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*/
+      var 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;
 }
 
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index b28f185..26ef744 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/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>

Reply via email to