diff --git a/src/toolbar/ActionButton.tsx b/src/toolbar/ActionButton.tsx index f394d32b..516e0880 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 { preventFocusOnClick } from '../utils/react'; +import { pointerEventsNone, preventFocusOnClick } from '../utils/react'; import { TooltipId } from './i18n'; import en from './i18n.en.json'; @@ -108,9 +108,7 @@ const ActionButton: React.FC = (props) => { onMouseDown={preventFocusOnClick} onClick={props.onAction} disabled={props.enabled === false} - style={ - props.enabled === false ? { pointerEvents: 'none' } : undefined - } + style={props.enabled === false ? pointerEventsNone : undefined} > {props.showProgress ? ( = (props) => { height={`${buttonSize}px`} src={props.icon} alt={props.id} - style={{ pointerEvents: 'none' }} + style={pointerEventsNone} /> )} diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx index 73a1a5c4..19d17e3a 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 { preventFocusOnClick } from '../utils/react'; +import { pointerEventsNone, preventFocusOnClick } from '../utils/react'; import { TooltipId } from './i18n'; import en from './i18n.en.json'; @@ -120,10 +120,7 @@ const OpenFileButton: React.FC = (props) => { ...tooltipTargetProps, intent: Intent.PRIMARY, disabled: props.enabled === false, - style: - props.enabled === false - ? { pointerEvents: 'none' } - : undefined, + style: props.enabled === false ? pointerEventsNone : undefined, onMouseDown: preventFocusOnClick, onClick: props.onClick, })} @@ -141,7 +138,7 @@ const OpenFileButton: React.FC = (props) => { height={`${buttonSize}px`} src={props.icon} alt={props.id} - style={{ pointerEvents: 'none' }} + style={pointerEventsNone} /> )} diff --git a/src/utils/react.ts b/src/utils/react.ts index 1bc7ea70..82aa1221 100644 --- a/src/utils/react.ts +++ b/src/utils/react.ts @@ -14,3 +14,6 @@ export const preventFocusOnClick: React.MouseEventHandler = (e) => e.preventDefa */ export const preventBrowserNativeContextMenu: React.MouseEventHandler = (e) => e.preventDefault(); + +/** Style to disable pointer events. */ +export const pointerEventsNone: React.CSSProperties = { pointerEvents: 'none' };