diff --git a/src/explorer/Explorer.test.tsx b/src/explorer/Explorer.test.tsx
index e226f6f6..78af7f67 100644
--- a/src/explorer/Explorer.test.tsx
+++ b/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(, {
- 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(, {
fileStorage: { fileNames: ['test.file'] },
diff --git a/src/explorer/Explorer.tsx b/src/explorer/Explorer.tsx
index 8b80180c..5d684a66 100644
--- a/src/explorer/Explorer.tsx
+++ b/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 = ({
icon={icon}
title={i18n.translate(toolTipId, toolTipReplacements)}
disabled={disabled}
- onMouseDown={preventFocusOnClick}
onClick={onClick}
/>
);
diff --git a/src/explorer/NewFileWizard.tsx b/src/explorer/NewFileWizard.tsx
index 9248d6e5..4fa70998 100644
--- a/src/explorer/NewFileWizard.tsx
+++ b/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 = ({
aria-label="Create"
intent="primary"
disabled={fileNameValidation !== FileNameValidationResult.IsOk}
- onMouseDown={preventFocusOnClick}
onClick={() => {
onClose();
dispatch(
diff --git a/src/explorer/RenameFileDialog.tsx b/src/explorer/RenameFileDialog.tsx
index f56d62c2..417a0a5e 100644
--- a/src/explorer/RenameFileDialog.tsx
+++ b/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 = ({
aria-label="Rename"
intent="primary"
disabled={result !== FileNameValidationResult.IsOk}
- onMouseDown={preventFocusOnClick}
onClick={() => {
onClose();
dispatch(
diff --git a/src/index.scss b/src/index.scss
index 89805e82..9dc1851b 100644
--- a/src/index.scss
+++ b/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;
}
diff --git a/src/status-bar/StatusBar.tsx b/src/status-bar/StatusBar.tsx
index a2a083e8..5a858195 100644
--- a/src/status-bar/StatusBar.tsx
+++ b/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) => {
}
>
-