jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix subtile bug with keyboard controls

Browse Source 
Summary:
The code used the hovered node and selected node somewhere inconsistently for keyboard controls, this led to subitle bugs where if you moused over the next keybaord jump point would be the hovered node sometimes. This straightens it all out

Changelog: [UIDebugger] Fixed bug with keyboard tree controls

Reviewed By: aigoncharov

Differential Revision: D47832249

fbshipit-source-id: 7697c97a817ed5b70250c0c4f12fc1c59bdb96b9
This commit is contained in:
Luke De Feo
2023-08-01 06:41:14 -07:00
committed by Facebook GitHub Bot
parent 21483986c3
commit 1394a41599
1 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
desktop/plugins/public/ui-debugger/components/tree/useKeyboardControls.tsx
View File

@@ -20,7 +20,7 @@ export type MillisSinceEpoch = number;
export function useKeyboardControls( export function useKeyboardControls(
treeNodes: TreeNode[], treeNodes: TreeNode[],
rowVirtualizer: Virtualizer<HTMLDivElement, Element>, rowVirtualizer: Virtualizer<HTMLDivElement, Element>,
selectedNode: Id | undefined, selectedNodeId: Id | undefined,
hoveredNodeId: Id | undefined, hoveredNodeId: Id | undefined,
onSelectNode: OnSelectNode, onSelectNode: OnSelectNode,
onHoverNode: (...id: Id[]) => void, onHoverNode: (...id: Id[]) => void,
@@ -32,7 +32,9 @@ export function useKeyboardControls(
useEffect(() => { useEffect(() => {
const listener = (event: KeyboardEvent) => { const listener = (event: KeyboardEvent) => {
const hoveredNode = treeNodes.find((item) => item.id === hoveredNodeId); const kbTargetNodeId = selectedNodeId ?? hoveredNodeId;
const kbTargetNode = treeNodes.find((item) => item.id === kbTargetNodeId);
switch (event.key) { switch (event.key) {
case 'Enter': { case 'Enter': {
if (hoveredNodeId != null) { if (hoveredNodeId != null) {
@@ -44,31 +46,32 @@ export function useKeyboardControls(
case 'ArrowRight': case 'ArrowRight':
event.preventDefault(); event.preventDefault();
if (hoveredNode) { if (kbTargetNode) {
if (hoveredNode.isExpanded) { if (kbTargetNode.isExpanded) {
moveSelectedNodeUpOrDown( moveSelectedNodeUpOrDown(
'ArrowDown', 'ArrowDown',
treeNodes, treeNodes,
rowVirtualizer, rowVirtualizer,
hoveredNodeId, kbTargetNode.id,
selectedNode, selectedNodeId,
onSelectNode, onSelectNode,
onHoverNode, onHoverNode,
isUsingKBToScrollUntill, isUsingKBToScrollUntill,
); );
} else { } else {
onExpandNode(hoveredNode.id); onExpandNode(kbTargetNode.id);
} }
} }
break; break;
case 'ArrowLeft': { case 'ArrowLeft': {
event.preventDefault(); event.preventDefault();
if (hoveredNode) {
if (hoveredNode.isExpanded) { if (kbTargetNode) {
onCollapseNode(hoveredNode.id); if (kbTargetNode.isExpanded) {
onCollapseNode(kbTargetNode.id);
} else { } else {
const parentIdx = treeNodes.findIndex( const parentIdx = treeNodes.findIndex(
(treeNode) => treeNode.id === hoveredNode.parent, (treeNode) => treeNode.id === kbTargetNode.parent,
); );
moveSelectedNodeViaKeyBoard( moveSelectedNodeViaKeyBoard(
parentIdx, parentIdx,
@@ -92,7 +95,7 @@ export function useKeyboardControls(
treeNodes, treeNodes,
rowVirtualizer, rowVirtualizer,
hoveredNodeId, hoveredNodeId,
selectedNode, selectedNodeId,
onSelectNode, onSelectNode,
onHoverNode, onHoverNode,
isUsingKBToScrollUntill, isUsingKBToScrollUntill,
@@ -108,7 +111,7 @@ export function useKeyboardControls(
}, [ }, [
treeNodes, treeNodes,
onSelectNode, onSelectNode,
selectedNode, selectedNodeId,
isUsingKBToScrollUntill, isUsingKBToScrollUntill,
onExpandNode, onExpandNode,
onCollapseNode, onCollapseNode,