From 7182b5997627405449bdd0fed65aeb6de19c0a4f Mon Sep 17 00:00:00 2001
From: Harshal Dhumal <harshal.dhumal@enterprisedb.com>
Date: Fri, 21 Jul 2017 13:33:59 +0100
Subject: [PATCH] Ensure arrow keys work correctly when the pane is focused
 instead of the tab in the query tool history.

---
 .../static/jsx/history/query_history.jsx        | 17 +++++++++--------
 web/pgadmin/static/scss/sqleditor/_history.scss |  1 +
 .../javascript/history/query_history_spec.jsx   |  8 ++++----
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/web/pgadmin/static/jsx/history/query_history.jsx b/web/pgadmin/static/jsx/history/query_history.jsx
index a276e5398..8efe08bd9 100644
--- a/web/pgadmin/static/jsx/history/query_history.jsx
+++ b/web/pgadmin/static/jsx/history/query_history.jsx
@@ -57,13 +57,13 @@ export default class QueryHistory extends React.Component {
 
   refocus() {
     if (this.state.history.length > 0) {
-      this.retrieveSelectedQuery().parentElement.focus();
+      this.retrieveQueryListPane().focus();
     }
   }
 
-  retrieveSelectedQuery() {
+  retrieveQueryListPane() {
     return ReactDOM.findDOMNode(this)
-      .getElementsByClassName('selected')[0];
+      .getElementsByClassName('query-history')[0];
   }
 
   getCurrentHistoryDetail() {
@@ -172,13 +172,14 @@ export default class QueryHistory extends React.Component {
       <SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle}
                  pane2Style={queryDetailDivStyle}>
         <div id='query_list'
-             className="query-history">
+             className="query-history"
+             onKeyDown={this.navigateUpAndDown}
+             tabIndex='0'>
           <ul>
             {this.retrieveOrderedHistory()
               .map((entry, index) =>
-                <li key={index} className='list-item' tabIndex='0'
-                    onClick={this.onClickHandler.bind(this, index)}
-                    onKeyDown={this.navigateUpAndDown}>
+                <li key={index} className='list-item'
+                    onClick={this.onClickHandler.bind(this, index)}>
                   <QueryHistoryEntry
                     historyEntry={entry}
                     isSelected={index == this.state.selectedEntry}/>
@@ -198,4 +199,4 @@ QueryHistory.propTypes = {
 
 export {
   QueryHistory,
-};
\ No newline at end of file
+};
diff --git a/web/pgadmin/static/scss/sqleditor/_history.scss b/web/pgadmin/static/scss/sqleditor/_history.scss
index ed0c10f77..942af03f6 100644
--- a/web/pgadmin/static/scss/sqleditor/_history.scss
+++ b/web/pgadmin/static/scss/sqleditor/_history.scss
@@ -1,4 +1,5 @@
 .query-history {
+  height: 100%;
   .list-item {
     border-bottom: 1px solid $color-gray-3;
   }
diff --git a/web/regression/javascript/history/query_history_spec.jsx b/web/regression/javascript/history/query_history_spec.jsx
index 2fa6a7db8..c3b09ba22 100644
--- a/web/regression/javascript/history/query_history_spec.jsx
+++ b/web/regression/javascript/history/query_history_spec.jsx
@@ -36,11 +36,11 @@ describe('QueryHistory', () => {
     describe('when we switch to the query history tab', () => {
       beforeEach(() => {
         historyWrapper.node.refocus();
-        spyOn(historyWrapper.node, 'retrieveSelectedQuery');
+        spyOn(historyWrapper.node, 'retrieveQueryListPane');
       });
 
       it('does not try to focus on any element', () => {
-        expect(historyWrapper.node.retrieveSelectedQuery).not.toHaveBeenCalled();
+        expect(historyWrapper.node.retrieveQueryListPane).not.toHaveBeenCalled();
       });
     });
 
@@ -49,7 +49,7 @@ describe('QueryHistory', () => {
       expect(foundChildren.length).toBe(0);
       done();
     });
-    
+
     it('nothing is displayed on right panel', (done) => {
       let foundChildren = historyWrapper.find(QueryHistoryDetail);
       expect(foundChildren.length).toBe(1);
@@ -264,7 +264,7 @@ describe('QueryHistory', () => {
 
           beforeEach(() => {
             selectedListItem = ReactDOM.findDOMNode(historyWrapper.node)
-              .getElementsByClassName('selected')[0].parentElement;
+              .getElementsByClassName('query-history')[0];
 
             spyOn(selectedListItem, 'focus');
             historyWrapper.node.refocus();