Merge pull request #5113 from matrix-org/t3chguy/room-list/14959

Allow room tile context menu when minimized using right click

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -25,6 +25,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
     tooltip?: React.ReactNode;
     tooltipClassName?: string;
+    forceHide?: boolean;
 }
 
 interface IState {
@@ -39,7 +40,16 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
         };
     }
 
+    componentDidUpdate(prevProps: Readonly<ITooltipProps>) {
+        if (!prevProps.forceHide && this.props.forceHide && this.state.hover) {
+            this.setState({
+                hover: false,
+            });
+        }
+    }
+
     onMouseOver = () => {
+        if (this.props.forceHide) return;
         this.setState({
             hover: true,
         });

src/components/views/rooms/RoomTile.tsx

@@ -113,7 +113,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     };
 
     private get showContextMenu(): boolean {
-        return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite;
+        return this.props.tag !== DefaultTagID.Invite;
     }
 
     private get showMessagePreview(): boolean {
@@ -304,7 +304,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
     private onClickMute = ev => this.saveNotifState(ev, MUTE);
 
     private renderNotificationsMenu(isActive: boolean): React.ReactElement {
-        if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived || !this.showContextMenu) {
+        if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived ||
+            !this.showContextMenu || this.props.isMinimized
+        ) {
             // the menu makes no sense in these cases so do not show one
             return null;
         }
@@ -530,9 +532,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
             ariaDescribedBy = messagePreviewId(this.props.room.roomId);
         }
 
+        const props: Partial<React.ComponentProps<typeof AccessibleTooltipButton>> = {};
         let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
         if (this.props.isMinimized) {
             Button = AccessibleTooltipButton;
+            props.title = name;
+            // force the tooltip to hide whilst we are showing the context menu
+            props.forceHide = !!this.state.generalMenuPosition;
         }
 
         return (
@@ -540,6 +546,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                 <RovingTabIndexWrapper inputRef={this.roomTileRef}>
                     {({onFocus, isActive, ref}) =>
                         <Button
+                            {...props}
                             onFocus={onFocus}
                             tabIndex={isActive ? 0 : -1}
                             inputRef={ref}
@@ -550,7 +557,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
                             aria-label={ariaLabel}
                             aria-selected={this.state.selected}
                             aria-describedby={ariaDescribedBy}
-                            title={this.props.isMinimized ? name : undefined}
                         >
                             {roomAvatar}
                             {nameContainer}