From 675d01013d813deed75cbec3408c05678754168a Mon Sep 17 00:00:00 2001 From: David Lechner Date: Tue, 15 Mar 2022 21:39:24 -0500 Subject: [PATCH] utils/react: drop preventFocusOnClick We can fix this better with css tweaks. --- src/explorer/Explorer.test.tsx | 11 ----------- src/explorer/Explorer.tsx | 3 +-- src/explorer/NewFileWizard.tsx | 2 -- src/explorer/RenameFileDialog.tsx | 2 -- src/index.scss | 8 +++++++- src/status-bar/StatusBar.tsx | 8 ++------ src/toolbar/ActionButton.tsx | 3 +-- src/toolbar/OpenFileButton.tsx | 3 +-- src/utils/react.ts | 6 ------ 9 files changed, 12 insertions(+), 34 deletions(-) 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) => { } > - diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx index 24fd29a1..e87f4af7 100644 --- a/src/toolbar/ActionButton.tsx +++ b/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 = ({ elementRef={tooltipTargetRef as IRef} {...tooltipTargetProps} intent={Intent.PRIMARY} - onMouseDown={preventFocusOnClick} onClick={onAction} disabled={enabled === false} style={enabled === false ? pointerEventsNone : undefined} diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx index 657a053e..b65c49ac 100644 --- a/src/toolbar/OpenFileButton.tsx +++ b/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 = ({ intent: Intent.PRIMARY, disabled: enabled === false, style: enabled === false ? pointerEventsNone : undefined, - onMouseDown: preventFocusOnClick, onClick: onClick, })} > diff --git a/src/utils/react.ts b/src/utils/react.ts index 82aa1221..ca3ff15b 100644 --- a/src/utils/react.ts +++ b/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.