From e51f9d24920f4f1a2af0777c6ee7de7d2cfaba25 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 2 Jul 2020 13:53:38 -0600 Subject: [PATCH 1/4] Fix closing the context menu causing the tile to be selected Fixes https://github.com/vector-im/riot-web/issues/14293 --- src/components/views/rooms/RoomTile2.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 2647a24412..920137ba88 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"; @@ -157,7 +156,9 @@ export default class RoomTile2 extends React.Component { this.setState({notificationsMenuPosition: target.getBoundingClientRect()}); }; - private onCloseNotificationsMenu = () => { + private onCloseNotificationsMenu = (ev: InputEvent) => { + ev.preventDefault(); + ev.stopPropagation(); this.setState({notificationsMenuPosition: null}); }; @@ -179,7 +180,9 @@ export default class RoomTile2 extends React.Component { }); }; - private onCloseGeneralMenu = () => { + private onCloseGeneralMenu = (ev: InputEvent) => { + ev.preventDefault(); + ev.stopPropagation(); this.setState({generalMenuPosition: null}); }; From aa702514ce2be1d124866e70553fb2b616d7217e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 2 Jul 2020 13:59:28 -0600 Subject: [PATCH 2/4] Don't try and show context menus if we don't have one Fixes https://github.com/vector-im/riot-web/issues/14295 --- src/components/views/rooms/RoomTile2.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 920137ba88..7dbe9f1f10 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -119,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); @@ -170,6 +174,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({ @@ -239,7 +246,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; } @@ -306,12 +313,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) { From 547690374eade938bf4044e2a092d3571c6d7ce2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 2 Jul 2020 14:53:21 -0600 Subject: [PATCH 3/4] Wrap event stoppage in null checks Some of the code paths (particularly onFinished) do not have events, but the code paths we care about to prevent the room selection do have events - we can stop those without stopping further menus. --- src/components/views/rooms/RoomTile2.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomTile2.tsx b/src/components/views/rooms/RoomTile2.tsx index 7dbe9f1f10..6f686dbac3 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -160,9 +160,11 @@ export default class RoomTile2 extends React.Component { this.setState({notificationsMenuPosition: target.getBoundingClientRect()}); }; - private onCloseNotificationsMenu = (ev: InputEvent) => { - ev.preventDefault(); - ev.stopPropagation(); + private onCloseNotificationsMenu = (ev?: InputEvent) => { + if (ev) { + ev.preventDefault(); + ev.stopPropagation(); + } this.setState({notificationsMenuPosition: null}); }; @@ -187,9 +189,11 @@ export default class RoomTile2 extends React.Component { }); }; - private onCloseGeneralMenu = (ev: InputEvent) => { - ev.preventDefault(); - ev.stopPropagation(); + private onCloseGeneralMenu = (ev?: InputEvent) => { + if (ev) { + ev.preventDefault(); + ev.stopPropagation(); + } this.setState({generalMenuPosition: null}); }; From 3847dc91c06f8796ddfb2aa97440ccc40cc7b165 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 2 Jul 2020 15:15:33 -0600 Subject: [PATCH 4/4] Move the stoppage to somewhere more generic --- src/components/structures/ContextMenu.js | 9 ++++++++- src/components/views/rooms/RoomTile2.tsx | 12 ++---------- 2 files changed, 10 insertions(+), 11 deletions(-) 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 6f686dbac3..1024198560 100644 --- a/src/components/views/rooms/RoomTile2.tsx +++ b/src/components/views/rooms/RoomTile2.tsx @@ -160,11 +160,7 @@ export default class RoomTile2 extends React.Component { this.setState({notificationsMenuPosition: target.getBoundingClientRect()}); }; - private onCloseNotificationsMenu = (ev?: InputEvent) => { - if (ev) { - ev.preventDefault(); - ev.stopPropagation(); - } + private onCloseNotificationsMenu = () => { this.setState({notificationsMenuPosition: null}); }; @@ -189,11 +185,7 @@ export default class RoomTile2 extends React.Component { }); }; - private onCloseGeneralMenu = (ev?: InputEvent) => { - if (ev) { - ev.preventDefault(); - ev.stopPropagation(); - } + private onCloseGeneralMenu = () => { this.setState({generalMenuPosition: null}); };