luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve keyboard arrow navigation

Browse Source
This commit is contained in:
Thomas Nordquist
2019-06-25 14:30:47 +02:00
parent f4051b4cdf
commit 1638080e85
2 changed files with 60 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/Tree/TreeNode.tsx
View File

@@ -95,7 +95,11 @@ class TreeNodeComponent extends React.Component<Props, State> {
}
private selectionDidChange = () => {
this.props.treeNode.viewModel && this.setState({ selected: this.props.treeNode.viewModel.isSelected() })
const selected = this.props.treeNode.viewModel && this.props.treeNode.viewModel.isSelected()
this.props.treeNode.viewModel && this.setState({ selected: Boolean(selected) })
if (selected && this.nodeRef && this.nodeRef.current) {
this.nodeRef.current.focus({ preventScroll: false })
}
}
private expandedDidChange = () => {
@@ -243,7 +247,9 @@ class TreeNodeComponent extends React.Component<Props, State> {
onMouseOver={this.mouseOver}
onMouseOut={this.mouseOut}
onClick={this.didClickTitle}
onFocus={() => this.props.didSelectTopic(this.props.treeNode)}
ref={this.nodeRef}
tabIndex={1000}
>
<TreeNodeTitle
toggleCollapsed={this.toggleCollapsed}