imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Close context menu when a modal is opened to prevent user getting stuck (#9560)

Browse source
This commit is contained in:
Michael Telatynski 2022-11-09 15:33:09 +00:00 • committed by GitHub
parent 7fbdd8bb5d
commit da779531f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 81 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/structures/ContextMenu.tsx
View file

@ -26,6 +26,7 @@ import UIStore from "../../stores/UIStore";
import { checkInputableElement, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import Modal, { ModalManagerEvent } from "../../Modal";
// Shamelessly ripped off Modal.js. There's probably a better way
// of doing reusable widgets like dialog boxes & menus where we go and
@ -127,11 +128,20 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
this.initialFocus = document.activeElement as HTMLElement;
}
componentWillUnmount() {
public componentDidMount() {
Modal.on(ModalManagerEvent.Opened, this.onModalOpen);
}
public componentWillUnmount() {
Modal.off(ModalManagerEvent.Opened, this.onModalOpen);
// return focus to the thing which had it before us
this.initialFocus.focus();
}
private onModalOpen = () => {
this.props.onFinished?.();
};
private collectContextMenuRect = (element: HTMLDivElement) => {
// We don't need to clean up when unmounting, so ignore
if (!element) return;
@ -183,7 +193,7 @@ export default class ContextMenu extends React.PureComponent<IProps, IState> {
private onFinished = (ev: React.MouseEvent) => {
ev.stopPropagation();
ev.preventDefault();
if (this.props.onFinished) this.props.onFinished();
this.props.onFinished?.();
};
private onClick = (ev: React.MouseEvent) => {