Merge pull request #4879 from matrix-org/travis/room-list/context-menu-fixes

Fix selection states of room tiles in the new room list

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 = (
-                <div className="mx_ContextualMenu_background" style={wrapperStyle} onClick={props.onFinished} onContextMenu={this.onContextMenu} />
+                <div className="mx_ContextualMenu_background" style={wrapperStyle} onClick={this._onFinished} onContextMenu={this.onContextMenu} />
             );
         }
 

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<IProps, IState> {
         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<IProps, IState> {
     };
 
     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<IProps, IState> {
     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<IProps, IState> {
     }
 
     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.
+        // TODO: We could do with a proper invite context menu, unlike what showContextMenu suggests
-        if (this.props.tag === DefaultTagID.Invite) {
-            return null;
-        }
 
         let contextMenu = null;
         if (this.state.generalMenuPosition) {