diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 85ea8387555..7bd7fd719e8 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -76,6 +76,17 @@ const OptionsButton: React.FC = ({ onFocusChange(menuDisplayed); }, [onFocusChange, menuDisplayed]); + const onOptionsClick = (e: React.MouseEvent): void => { + // Don't open the regular browser or our context menu on right-click + e.preventDefault(); + e.stopPropagation(); + openMenu(); + // when the context menu is opened directly, e.g. via mouse click, the onFocus handler which tracks + // the element that is currently focused is skipped. So we want to call onFocus manually to keep the + // position in the page even when someone is clicking around. + onFocus(); + }; + let contextMenu: ReactElement | null; if (menuDisplayed) { const tile = getTile && getTile(); @@ -97,13 +108,7 @@ const OptionsButton: React.FC = ({ { - openMenu(); - // when the context menu is opened directly, e.g. via mouse click, the onFocus handler which tracks - // the element that is currently focused is skipped. So we want to call onFocus manually to keep the - // position in the page even when someone is clicking around. - onFocus(); - }} + onClick={onOptionsClick} isExpanded={menuDisplayed} inputRef={ref} onFocus={onFocus}