Fix bug for keyboard shortcut with clickAction is focus.

dgreene1 · Dec 5, 2023 · 9291924 · 9291924
1 parent fce10b0
commit 9291924
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 23 deletions.
diff --git a/src/TreeView/index.tsx b/src/TreeView/index.tsx
@@ -661,7 +661,7 @@ const handleKeyDown = ({
   const element = getTreeNode(data, tabbableId);
   const id = element.id;
   if (event.ctrlKey) {
-    if (event.key === "a") {
+    if (event.key === "a" && clickAction !== clickActions.focus) {
       event.preventDefault();
       const dataWithoutRoot = data.filter((x) => x.parent !== null);
       const ids = dataWithoutRoot
@@ -678,7 +678,8 @@ const handleKeyDown = ({
       });
     } else if (
       event.shiftKey &&
-      (event.key === "Home" || event.key === "End")
+      (event.key === "Home" || event.key === "End") &&
+      clickAction !== clickActions.focus
     ) {
       const newId =
         event.key === "Home"
@@ -711,16 +712,18 @@ const handleKeyDown = ({
         event.preventDefault();
         const previous = getPreviousAccessible(data, id, expandedIds);
         if (previous != null && !disabledIds.has(previous)) {
-          dispatch({
-            type: treeTypes.changeSelectMany,
-            ids: propagateSelect
-              ? propagatedIds(data, [previous], disabledIds)
-              : [previous],
-            select: true,
-            multiSelect,
-            lastInteractedWith: previous,
-            lastManuallyToggled: previous,
-          });
+          if (clickAction !== clickActions.focus) {
+            dispatch({
+              type: treeTypes.changeSelectMany,
+              ids: propagateSelect
+                ? propagatedIds(data, [previous], disabledIds)
+                : [previous],
+              select: true,
+              multiSelect,
+              lastInteractedWith: previous,
+              lastManuallyToggled: previous,
+            });
+          }
           dispatch({
             type: treeTypes.focus,
             id: previous,
@@ -733,16 +736,18 @@ const handleKeyDown = ({
         event.preventDefault();
         const next = getNextAccessible(data, id, expandedIds);
         if (next != null && !disabledIds.has(next)) {
-          dispatch({
-            type: treeTypes.changeSelectMany,
-            ids: propagateSelect
-              ? propagatedIds(data, [next], disabledIds)
-              : [next],
-            multiSelect,
-            select: true,
-            lastInteractedWith: next,
-            lastManuallyToggled: next,
-          });
+          if (clickAction !== clickActions.focus) {
+            dispatch({
+              type: treeTypes.changeSelectMany,
+              ids: propagateSelect
+                ? propagatedIds(data, [next], disabledIds)
+                : [next],
+              multiSelect,
+              select: true,
+              lastInteractedWith: next,
+              lastManuallyToggled: next,
+            });
+          }
           dispatch({
             type: treeTypes.focus,
             id: next,

diff --git a/src/__tests__/ClickActionFocus.test.tsx b/src/__tests__/ClickActionFocus.test.tsx
@@ -41,6 +41,8 @@ function FocusClickActionTreeView() {
         <TreeView
           data={data}
           aria-label="directory tree"
+          togglableSelect
+          multiSelect
           clickAction="FOCUS"
           nodeRenderer={({ element, getNodeProps }) => (
             <div {...getNodeProps()}>{element.name}</div>
@@ -64,5 +66,56 @@ test("should not select on enter/space keydown when click action is focus", () =
     );
   }
   fireEvent.keyDown(node, { key: " " });
-  expect(nodes[0]).not.toHaveAttribute("aria-selected");
+  expect(nodes[0]).toHaveAttribute("aria-selected", "false");
+});
+
+test("should not select on control keydown when click action is focus", () => {
+  const { queryAllByRole } = render(<FocusClickActionTreeView />);
+
+  const nodes = queryAllByRole("treeitem");
+  nodes[0].focus();
+
+  if (document.activeElement == null) {
+    throw new Error(
+      `Expected to find an active element on the document (after focusing the first element with role["treeitem"]), but did not.`
+    );
+  }
+
+  fireEvent.keyDown(document.activeElement, { key: "a", ctrlKey: true });
+  nodes.forEach((x) => expect(x).toHaveAttribute("aria-selected", "false"));
+
+  fireEvent.keyDown(document.activeElement, {
+    key: "Home",
+    ctrlKey: true,
+    shiftKey: true,
+  });
+  nodes.forEach((x) => expect(x).toHaveAttribute("aria-selected", "false"));
+
+  fireEvent.keyDown(document.activeElement, {
+    key: "End",
+    ctrlKey: true,
+    shiftKey: true,
+  });
+  nodes.forEach((x) => expect(x).toHaveAttribute("aria-selected", "false"));
+});
+
+test("should not select on shift + arrow up/down keydown when click action is focus", () => {
+  const { queryAllByRole } = render(<FocusClickActionTreeView />);
+
+  const nodes = queryAllByRole("treeitem");
+  nodes[0].focus();
+
+  if (document.activeElement == null) {
+    throw new Error(
+      `Expected to find an active element on the document (after focusing the first element with role["treeitem"]), but did not.`
+    );
+  }
+  fireEvent.keyDown(document.activeElement, {
+    key: "ArrowDown",
+    shiftKey: true,
+  });
+  nodes.forEach((x) => expect(x).toHaveAttribute("aria-selected", "false"));
+  nodes[4].focus();
+  fireEvent.keyDown(document.activeElement, { key: "ArrowUp", shiftKey: true });
+  nodes.forEach((x) => expect(x).toHaveAttribute("aria-selected", "false"));
 });