fix: Allow clicking anywhere outside command menu to close
This commit is contained in:
@@ -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`
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user