fix: More context menu fixes

This commit is contained in:
Tom Moor
2021-07-05 16:35:46 -04:00
parent f8ffa4e25a
commit 181a20a268
2 changed files with 16 additions and 9 deletions

View File

@ -26,20 +26,29 @@ const MenuItem = ({
hide, hide,
...rest ...rest
}: Props) => { }: Props) => {
// We bind to mousedown instead of onClick here as otherwise menu items do not const handleClick = React.useCallback(
// work in Firefox which triggers the hideOnClickOutside handler first via
// mousedown.
const handleMouseDown = React.useCallback(
(ev) => { (ev) => {
if (onClick) { if (onClick) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
onClick(ev); onClick(ev);
} }
if (hide) {
hide();
}
}, },
[onClick] [onClick, hide]
); );
// Preventing default mousedown otherwise menu items do not work in Firefox,
// which triggers the hideOnClickOutside handler first via mousedown hiding
// and un-rendering the menu contents.
const handleMouseDown = React.useCallback((ev) => {
ev.preventDefault();
ev.stopPropagation();
}, []);
return ( return (
<BaseMenuItem <BaseMenuItem
onClick={disabled ? undefined : onClick} onClick={disabled ? undefined : onClick}
@ -52,8 +61,8 @@ const MenuItem = ({
{...props} {...props}
$toggleable={selected !== undefined} $toggleable={selected !== undefined}
as={onClick ? "button" : as} as={onClick ? "button" : as}
onClick={handleClick}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onClick={hide}
> >
{selected !== undefined && ( {selected !== undefined && (
<> <>

View File

@ -33,7 +33,7 @@ type Props = {|
@observer @observer
class DocumentEditor extends React.Component<Props> { class DocumentEditor extends React.Component<Props> {
@observable activeLinkEvent: ?MouseEvent; @observable activeLinkEvent: ?MouseEvent;
@observable ref = React.createRef<HTMLDivElement | HTMLInputElement>(); ref = React.createRef<HTMLDivElement | HTMLInputElement>();
focusAtStart = () => { focusAtStart = () => {
if (this.props.innerRef.current) { if (this.props.innerRef.current) {
@ -110,8 +110,6 @@ class DocumentEditor extends React.Component<Props> {
const normalizedTitle = const normalizedTitle =
!title && readOnly ? document.titleWithDefault : title; !title && readOnly ? document.titleWithDefault : title;
console.log(this.ref.current);
return ( return (
<Flex auto column> <Flex auto column>
{readOnly ? ( {readOnly ? (