utils/react: drop preventFocusOnClick

We can fix this better with css tweaks.

src/explorer/Explorer.test.tsx

@@ -85,17 +85,6 @@ describe('list item', () => {
         expect(button).not.toBeVisible();
     });
 
-    it('should not focus buttons on click', () => {
-        const [explorer] = testRender(<Explorer />, {
-            fileStorage: { fileNames: ['test.file'] },
-        });
-
-        const button = explorer.getByTitle('Rename test.file');
-
-        userEvent.click(button);
-        expect(button).not.toHaveFocus();
-    });
-
     it('should dispatch delete action when button is clicked', async () => {
         const [explorer, dispatch] = testRender(<Explorer />, {
             fileStorage: { fileNames: ['test.file'] },

src/explorer/Explorer.tsx

@@ -26,7 +26,7 @@ import {
     fileStorageExportFile,
 } from '../fileStorage/actions';
 import { useSelector } from '../reducers';
-import { preventBrowserNativeContextMenu, preventFocusOnClick } from '../utils/react';
+import { preventBrowserNativeContextMenu } from '../utils/react';
 import NewFileWizard from './NewFileWizard';
 import RenameFileDialog from './RenameFileDialog';
 import { explorerDeleteFile, explorerImportFiles } from './actions';
@@ -60,7 +60,6 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
             icon={icon}
             title={i18n.translate(toolTipId, toolTipReplacements)}
             disabled={disabled}
-            onMouseDown={preventFocusOnClick}
             onClick={onClick}
         />
     );

src/explorer/NewFileWizard.tsx

@@ -16,7 +16,6 @@ import {
     FileNameValidationResult,
     pythonFileExtension,
 } from '../pybricksMicropython/lib';
-import { preventFocusOnClick } from '../utils/react';
 import FileNameFormGroup from './FileNameFormGroup';
 import { Hub, explorerCreateNewFile } from './actions';
 import { NewFileWizardStringId } from './i18n';
@@ -84,7 +83,6 @@ const NewFileWizard: React.VoidFunctionComponent<NewFileWizardProps> = ({
                         aria-label="Create"
                         intent="primary"
                         disabled={fileNameValidation !== FileNameValidationResult.IsOk}
-                        onMouseDown={preventFocusOnClick}
                         onClick={() => {
                             onClose();
                             dispatch(

src/explorer/RenameFileDialog.tsx

@@ -7,7 +7,6 @@ import React, { useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { fileStorageRenameFile } from '../fileStorage/actions';
 import { FileNameValidationResult } from '../pybricksMicropython/lib';
-import { preventFocusOnClick } from '../utils/react';
 import FileNameFormGroup from './FileNameFormGroup';
 import { RenameFileStringId } from './i18n';
 import en from './i18n.en.json';
@@ -64,7 +63,6 @@ const RenameFileDialog: React.VoidFunctionComponent<RenameFileDialogProps> = ({
                         aria-label="Rename"
                         intent="primary"
                         disabled={result !== FileNameValidationResult.IsOk}
-                        onMouseDown={preventFocusOnClick}
                         onClick={() => {
                             onClose();
                             dispatch(

src/index.scss

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2021 The Pybricks Authors
+// Copyright (c) 2020-2022 The Pybricks Authors
 
 @import './variables.scss';
 @import '~normalize.css';
@@ -49,6 +49,12 @@ a.#{$ns}-button {
     text-align: left;
 }
 
+// https://github.com/palantir/blueprint/issues/
+.#{$ns}-control input:focus:not(:focus-visible) ~ .#{$ns}-control-indicator,
+.#{$ns}-button:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .#{$ns}-button-text > img {
     display: block;
 }

src/status-bar/StatusBar.tsx

@@ -7,7 +7,7 @@ import { useI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { BleConnectionState } from '../ble/reducers';
 import { useSelector } from '../reducers';
-import { preventBrowserNativeContextMenu, preventFocusOnClick } from '../utils/react';
+import { preventBrowserNativeContextMenu } from '../utils/react';
 import { MessageId } from './i18n';
 import en from './i18n.en.json';
 
@@ -59,11 +59,7 @@ const HubInfoButton: React.VFC = (_props) => {
                 </table>
             }
         >
-            <Button
-                title={i18n.translate(MessageId.HubInfoTitle)}
-                minimal={true}
-                onMouseDown={preventFocusOnClick}
-            >
+            <Button title={i18n.translate(MessageId.HubInfoTitle)} minimal={true}>
                 {deviceName}
             </Button>
         </Popover2>

src/toolbar/ActionButton.tsx

@@ -13,7 +13,7 @@ import { Tooltip2 } from '@blueprintjs/popover2';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useMemo, useState } from 'react';
 import { tooltipDelay } from '../app/constants';
-import { pointerEventsNone, preventFocusOnClick } from '../utils/react';
+import { pointerEventsNone } from '../utils/react';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
@@ -113,7 +113,6 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                     elementRef={tooltipTargetRef as IRef<HTMLButtonElement>}
                     {...tooltipTargetProps}
                     intent={Intent.PRIMARY}
-                    onMouseDown={preventFocusOnClick}
                     onClick={onAction}
                     disabled={enabled === false}
                     style={enabled === false ? pointerEventsNone : undefined}

src/toolbar/OpenFileButton.tsx

@@ -7,7 +7,7 @@ import { useI18n } from '@shopify/react-i18n';
 import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { tooltipDelay } from '../app/constants';
-import { pointerEventsNone, preventFocusOnClick } from '../utils/react';
+import { pointerEventsNone } from '../utils/react';
 import { TooltipId } from './i18n';
 import en from './i18n.en.json';
 
@@ -132,7 +132,6 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
                         intent: Intent.PRIMARY,
                         disabled: enabled === false,
                         style: enabled === false ? pointerEventsNone : undefined,
-                        onMouseDown: preventFocusOnClick,
                         onClick: onClick,
                     })}
                 >

src/utils/react.ts

@@ -2,12 +2,6 @@
 
 import React from 'react';
 
-/**
- * Callback that can be passed to onMouseDown event handlers to prevent
- * an element from becoming focused when clicked.
- */
-export const preventFocusOnClick: React.MouseEventHandler = (e) => e.preventDefault();
-
 /**
  * Callback that can be passed to onContextMenu event handlers to prevent
  * the native browser context menu from being shown.