fix: Allow clicking anywhere outside command menu to close

This commit is contained in:
Tom Moor
2022-11-28 23:35:41 -05:00
parent 59d9859a64
commit b40bb71adf
2 changed files with 21 additions and 12 deletions

View File

@@ -140,13 +140,11 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
opacity: ${(props) => (props.disabled ? ".5" : 1)};
}
${(props) =>
props.disabled
? "pointer-events: none;"
: `
${(props) => props.disabled && "pointer-events: none;"}
${
${(props) =>
props.$active === undefined &&
!props.disabled &&
`
@media (hover: hover) {
&:hover,
@@ -162,11 +160,11 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
}
}
}
`
}
`}
${
${(props) =>
props.$active &&
!props.disabled &&
`
color: ${props.theme.white};
background: ${props.dangerous ? props.theme.danger : props.theme.primary};
@@ -176,16 +174,14 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
svg {
fill: ${props.theme.white};
}
`
}
`};
`}
${breakpoint("tablet")`
padding: 4px 12px;
padding-right: ${(props: MenuAnchorProps) =>
props.disclosure ? 32 : 12}px;
font-size: 14px;
`};
`}
`;
export const MenuAnchor = styled.a`

View File

@@ -76,6 +76,7 @@ class CommandMenu<T extends MenuItem> extends React.Component<Props<T>, State> {
};
componentDidMount() {
window.addEventListener("mousedown", this.handleMouseDown);
window.addEventListener("keydown", this.handleKeyDown);
}
@@ -107,9 +108,21 @@ class CommandMenu<T extends MenuItem> extends React.Component<Props<T>, State> {
}
componentWillUnmount() {
window.removeEventListener("mousedown", this.handleMouseDown);
window.removeEventListener("keydown", this.handleKeyDown);
}
handleMouseDown = (event: MouseEvent) => {
if (
!this.menuRef.current ||
this.menuRef.current.contains(event.target as Element)
) {
return;
}
this.props.onClose();
};
handleKeyDown = (event: KeyboardEvent) => {
if (!this.props.isActive) {
return;