Bug 1450930 - The Page Down/Up keys doesn't work after pressing Home/End keys. r?yzen
--- a/devtools/client/shared/components/tree/TreeView.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -286,20 +286,27 @@ define(function(require, exports, module
case "ArrowUp":
const previousRow = this.rows[index - 1];
if (previousRow) {
this.selectRow(previousRow);
}
break;
case "Home":
const firstRow = this.rows[0];
+
if (firstRow) {
- this.selectRow(firstRow);
+ // Due to the styling, the first row is sometimes overlapped by
+ // the table head. So we want to force the tree to scroll to the very top.
+ this.selectRow(firstRow, {
+ block: "end",
+ inline: "nearest"
+ });
}
break;
+
case "End":
const lastRow = this.rows[this.rows.length - 1];
if (lastRow) {
this.selectRow(lastRow);
}
break;
}
@@ -336,26 +343,29 @@ define(function(require, exports, module
if (!row) {
// If selected row is not found, return index of the first row.
return 0;
}
return this.rows.indexOf(row);
}
- selectRow(row) {
+ selectRow(row, scrollOptions = {block: "nearest"}) {
row = findDOMNode(row);
+
if (this.state.selected === row.id) {
+ row.scrollIntoView(scrollOptions);
return;
}
this.setState(Object.assign({}, this.state, {
selected: row.id
}));
- row.scrollIntoView({block: "nearest"});
+
+ row.scrollIntoView(scrollOptions);
}
isSelected(nodePath) {
return nodePath === this.state.selected;
}
// Filtering & Sorting