diff --git a/src/components/structures/ContextMenu.js b/src/components/structures/ContextMenu.js index 5ba2662796..e43b0d1431 100644 --- a/src/components/structures/ContextMenu.js +++ b/src/components/structures/ContextMenu.js @@ -140,6 +140,13 @@ export class ContextMenu extends React.Component { e.stopPropagation(); }; + // Prevent clicks on the background from going through to the component which opened the menu. + _onFinished = (ev: InputEvent) => { + ev.stopPropagation(); + ev.preventDefault(); + if (this.props.onFinished) this.props.onFinished(); + }; + _onMoveFocus = (element, up) => { let descending = false; // are we currently descending or ascending through the DOM tree? @@ -326,7 +333,7 @@ export class ContextMenu extends React.Component { let background; if (hasBackground) { background = ( -
+
); } diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 445aeca157..577387948c 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -17,7 +17,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from "react"; +import React from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import classNames from "classnames"; import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; @@ -30,7 +30,6 @@ import { ContextMenu, ContextMenuButton, MenuItemRadio } from "../../structures/ import { DefaultTagID, TagID } from "../../../stores/room-list/models"; import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import RoomTileIcon from "./RoomTileIcon"; import { getRoomNotifsState, ALL_MESSAGES, ALL_MESSAGES_LOUD, MENTIONS_ONLY, MUTE } from "../../../RoomNotifs"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; import { setRoomNotifsState } from "../../../RoomNotifs"; @@ -120,6 +119,10 @@ export default class RoomTile2 extends React.Component { ActiveRoomObserver.addListener(this.props.room.roomId, this.onActiveRoomUpdate); } + private get showContextMenu(): boolean { + return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite; + } + public componentWillUnmount() { if (this.props.room) { ActiveRoomObserver.removeListener(this.props.room.roomId, this.onActiveRoomUpdate); @@ -169,6 +172,9 @@ export default class RoomTile2 extends React.Component { }; private onContextMenu = (ev: React.MouseEvent) => { + // If we don't have a context menu to show, ignore the action. + if (!this.showContextMenu) return; + ev.preventDefault(); ev.stopPropagation(); this.setState({ @@ -236,7 +242,7 @@ export default class RoomTile2 extends React.Component { private onClickMute = ev => this.saveNotifState(ev, MUTE); private renderNotificationsMenu(): React.ReactElement { - if (this.props.isMinimized || MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Invite) { + if (MatrixClientPeg.get().isGuest() || !this.showContextMenu) { // the menu makes no sense in these cases so do not show one return null; } @@ -304,12 +310,9 @@ export default class RoomTile2 extends React.Component { } private renderGeneralMenu(): React.ReactElement { - if (this.props.isMinimized) return null; // no menu when minimized + if (!this.showContextMenu) return null; // no menu to show - // TODO: Get a proper invite context menu, or take invites out of the room list. - if (this.props.tag === DefaultTagID.Invite) { - return null; - } + // TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests let contextMenu = null; if (this.state.generalMenuPosition) {