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

@@ -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 () => {

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}
         />
     );
 };