mirror of
				https://github.com/pgadmin-org/pgadmin4.git
				synced 2025-02-25 18:55:31 -06:00 
			
		
		
		
	Ensure arrow keys work correctly when the pane is focused instead of the tab in the query tool history.
This commit is contained in:
		
				
					committed by
					
						
						Dave Page
					
				
			
			
				
	
			
			
			
						parent
						
							70418144cf
						
					
				
				
					commit
					7182b59976
				
			@@ -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,
 | 
			
		||||
};
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,5 @@
 | 
			
		||||
.query-history {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  .list-item {
 | 
			
		||||
    border-bottom: 1px solid $color-gray-3;
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
@@ -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();
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user