Skip to content

Commit

Permalink
Fix flicker of focus state when initially right clicking
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewserong committed Sep 14, 2023
1 parent 71df0f0 commit bfc6f26
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ function ListViewBlockSelectButton(
block: { clientId },
onClick,
onContextMenu,
onMouseDown,
onToggleExpanded,
tabIndex,
onFocus,
Expand Down Expand Up @@ -197,6 +198,7 @@ function ListViewBlockSelectButton(
onClick={ onClick }
onContextMenu={ onContextMenu }
onKeyDown={ onKeyDownHandler }
onMouseDown={ onMouseDown }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
Expand Down
35 changes: 33 additions & 2 deletions packages/block-editor/src/components/list-view/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
useRef,
useEffect,
useCallback,
useMemo,
memo,
} from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -251,9 +252,38 @@ function ListViewBlock( {
event.preventDefault();
}
},
[ settingsRef, showBlockActions ]
[ allowRightClickOverrides, settingsRef, showBlockActions ]
);

const onMouseDown = useCallback(
( event ) => {
// Prevent right-click from focusing the block,
// because focus will be handled when opening the block settings dropdown.
if ( allowRightClickOverrides && event.button === 2 ) {
event.preventDefault();
}
},
[ allowRightClickOverrides ]
);

const settingsPopoverAnchor = useMemo( () => {
const { ownerDocument } = rowRef?.current || {};

// If no custom position is set, the settings dropdown will be anchored to the
// DropdownMenu toggle button.
if ( ! settingsAnchorRect || ! ownerDocument ) {
return undefined;
}

// Position the settings dropdown at the cursor when right-clicking a block.
return {
ownerDocument,
getBoundingClientRect() {
return settingsAnchorRect;
},
};
}, [ settingsAnchorRect ] );

const clearSettingsAnchorRect = useCallback( () => {
// Clear the custom position for the settings dropdown so that it is restored back
// to being anchored to the DropdownMenu toggle button.
Expand Down Expand Up @@ -328,6 +358,7 @@ function ListViewBlock( {
block={ block }
onClick={ selectEditorBlock }
onContextMenu={ onContextMenu }
onMouseDown={ onMouseDown }
onToggleExpanded={ toggleExpanded }
isSelected={ isSelected }
position={ position }
Expand Down Expand Up @@ -395,7 +426,7 @@ function ListViewBlock( {
icon={ moreVertical }
label={ settingsAriaLabel }
popoverProps={ {
anchorRect: settingsAnchorRect, // Used to position the settings at the cursor on right-click.
anchor: settingsPopoverAnchor, // Used to position the settings at the cursor on right-click.
} }
toggleProps={ {
ref,
Expand Down

0 comments on commit bfc6f26

Please sign in to comment.