IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Ensure arrow keys work correctly when the pane is focused instead of the tab in the query tool history.

Browse Source
This commit is contained in:
Harshal Dhumal 2017-07-21 13:33:59 +01:00 committed by Dave Page
parent 70418144cf
commit 7182b59976
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/pgadmin/static/jsx/history/query_history.jsx
View File

@ -57,13 +57,13 @@ export default class QueryHistory extends React.Component {
refocus() { refocus() {
if (this.state.history.length > 0) { if (this.state.history.length > 0) {
this.retrieveSelectedQuery().parentElement.focus(); this.retrieveQueryListPane().focus();
} }
} }
retrieveSelectedQuery() { retrieveQueryListPane() {
return ReactDOM.findDOMNode(this) return ReactDOM.findDOMNode(this)
.getElementsByClassName('selected')[0]; .getElementsByClassName('query-history')[0];
} }
getCurrentHistoryDetail() { getCurrentHistoryDetail() {
@ -172,13 +172,14 @@ export default class QueryHistory extends React.Component {
<SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle} <SplitPane defaultSize="50%" split="vertical" pane1Style={queryEntryListDivStyle}
pane2Style={queryDetailDivStyle}> pane2Style={queryDetailDivStyle}>
<div id='query_list' <div id='query_list'
className="query-history"> className="query-history"
onKeyDown={this.navigateUpAndDown}
tabIndex='0'>
<ul> <ul>
{this.retrieveOrderedHistory() {this.retrieveOrderedHistory()
.map((entry, index) => .map((entry, index) =>
<li key={index} className='list-item' tabIndex='0' <li key={index} className='list-item'
onClick={this.onClickHandler.bind(this, index)} onClick={this.onClickHandler.bind(this, index)}>
onKeyDown={this.navigateUpAndDown}>
<QueryHistoryEntry <QueryHistoryEntry
historyEntry={entry} historyEntry={entry}
isSelected={index == this.state.selectedEntry}/> isSelected={index == this.state.selectedEntry}/>

1
web/pgadmin/static/scss/sqleditor/_history.scss
View File

@ -1,4 +1,5 @@
.query-history { .query-history {
height: 100%;
.list-item { .list-item {
border-bottom: 1px solid $color-gray-3; border-bottom: 1px solid $color-gray-3;
} }

6
web/regression/javascript/history/query_history_spec.jsx
View File

@ -36,11 +36,11 @@ describe('QueryHistory', () => {
describe('when we switch to the query history tab', () => { describe('when we switch to the query history tab', () => {
beforeEach(() => { beforeEach(() => {
historyWrapper.node.refocus(); historyWrapper.node.refocus();
spyOn(historyWrapper.node, 'retrieveSelectedQuery'); spyOn(historyWrapper.node, 'retrieveQueryListPane');
}); });
it('does not try to focus on any element', () => { it('does not try to focus on any element', () => {
expect(historyWrapper.node.retrieveSelectedQuery).not.toHaveBeenCalled(); expect(historyWrapper.node.retrieveQueryListPane).not.toHaveBeenCalled();
}); });
}); });
@ -264,7 +264,7 @@ describe('QueryHistory', () => {
beforeEach(() => { beforeEach(() => {
selectedListItem = ReactDOM.findDOMNode(historyWrapper.node) selectedListItem = ReactDOM.findDOMNode(historyWrapper.node)
.getElementsByClassName('selected')[0].parentElement; .getElementsByClassName('query-history')[0];
spyOn(selectedListItem, 'focus'); spyOn(selectedListItem, 'focus');
historyWrapper.node.refocus(); historyWrapper.node.refocus();