From 2536e178655019db10e49d43a75e7f6f2d63e793 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 8 Apr 2022 11:04:39 -0500
Subject: [PATCH] explorer: fix click propagating from action buttons

When the tree item actions buttons were clicked, they were also clicking
the underlying tree item.
---
 src/explorer/Explorer.test.tsx |  9 +++++++++
 src/explorer/Explorer.tsx      | 11 ++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/explorer/Explorer.test.tsx b/src/explorer/Explorer.test.tsx
index 23964453..ebf4f674 100644
--- a/src/explorer/Explorer.test.tsx
+++ b/src/explorer/Explorer.test.tsx
@@ -115,6 +115,9 @@ describe('tree item', () => {
             userEvent.click(button);
 
             expect(dispatch).toHaveBeenCalledWith(explorerRenameFile('test.file'));
+
+            // should not propagate to treeitem
+            expect(dispatch).toHaveBeenCalledTimes(1);
         });
 
         it('should dispatch action when key is pressed', async () => {
@@ -144,6 +147,9 @@ describe('tree item', () => {
             userEvent.click(button);
 
             expect(dispatch).toHaveBeenCalledWith(explorerExportFile('test.file'));
+
+            // should not propagate to treeitem
+            expect(dispatch).toHaveBeenCalledTimes(1);
         });
 
         it('should dispatch export action when key is pressed', async () => {
@@ -173,6 +179,9 @@ describe('tree item', () => {
             userEvent.click(button);
 
             expect(dispatch).toHaveBeenCalledWith(explorerDeleteFile('test.file'));
+
+            // should not propagate to treeitem
+            expect(dispatch).toHaveBeenCalledTimes(1);
         });
 
         it('should dispatch delete action when key is pressed', async () => {
diff --git a/src/explorer/Explorer.tsx b/src/explorer/Explorer.tsx
index f72f860e..897f236c 100644
--- a/src/explorer/Explorer.tsx
+++ b/src/explorer/Explorer.tsx
@@ -61,6 +61,15 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
     focusable,
     onClick,
 }) => {
+    const handleClick = useCallback<React.MouseEventHandler>(
+        (e) => {
+            // prevent click on treeitem too
+            e.stopPropagation();
+            onClick();
+        },
+        [onClick],
+    );
+
     return (
         <Button
             icon={icon}
@@ -68,7 +77,7 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
             disabled={disabled}
             tabIndex={focusable === false ? -1 : undefined}
             onFocus={focusable === false ? (e) => e.preventDefault() : undefined}
-            onClick={onClick}
+            onClick={handleClick}
         />
     );
 };