Fix Shortcut prompt for Search showing in minimized Roomlist (#9014)

Author: justjanne

res/css/structures/_LeftPanel.scss

@@ -122,38 +122,6 @@ $roomListCollapsedWidth: 68px;
                 margin-top: 12px;
             }
 
-            .mx_RoomSearch_shortcutPrompt {
-                border-radius: 6px;
-                background-color: $panel-actions;
-                padding: 2px 4px;
-                user-select: none;
-                font-size: $font-12px;
-                line-height: $font-15px;
-                font-weight: $font-semi-bold;
-                color: $light-fg-color;
-                margin-right: 6px;
-            }
-
-            .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
-                .mx_RoomSearch_shortcutPrompt {
-                    display: none;
-                }
-
-                & + .mx_LeftPanel_exploreButton,
-                & + .mx_LeftPanel_recentsButton {
-                    // Cheaty way to return the occupied space to the filter input
-                    flex-basis: 0;
-                    margin: 0;
-                    width: 0;
-
-                    // Don't forget to hide the masked ::before icon,
-                    // using display:none or visibility:hidden would break accessibility
-                    &::before {
-                        content: none;
-                    }
-                }
-            }
-
             .mx_LeftPanel_dialPadButton {
                 width: 32px;
                 height: 32px;

res/css/structures/_RoomSearch.scss

@@ -17,6 +17,7 @@ limitations under the License.
 // Note: this component expects to be contained within a flexbox
 .mx_RoomSearch {
     flex: 1;
+    min-width: 0;
     border-radius: 8px;
     background-color: $panel-actions;
     // keep border thickness consistent to prevent movement
@@ -28,6 +29,8 @@ limitations under the License.
     display: flex;
     align-items: center;
 
+    cursor: pointer;
+
     .mx_RoomSearch_icon {
         width: 16px;
         height: 16px;
@@ -36,11 +39,35 @@ limitations under the License.
         background-color: $secondary-content;
         margin-left: 7px;
         margin-bottom: 2px;
+        flex-shrink: 0;
     }
 
     .mx_RoomSearch_spotlightTriggerText {
         font-size: $font-12px;
         line-height: $font-16px;
+        color: $tertiary-content;
+        flex: 1;
+        min-width: 0;
+        // the following rules are to match that of a real input field
+        overflow: hidden;
+        margin: 9px;
+        font-weight: $font-semi-bold;
+    }
+
+    .mx_RoomSearch_shortcutPrompt {
+        border-radius: 6px;
+        background-color: $panel-actions;
+        padding: 2px 4px;
+        user-select: none;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        font-family: inherit;
+        font-weight: $font-semi-bold;
+        color: $light-fg-color;
+        margin-right: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     &.mx_RoomSearch_minimized {
@@ -55,44 +82,25 @@ limitations under the License.
             align-self: center;
         }
 
-        &:hover {
-            background-color: $tertiary-content;
-
-            .mx_RoomSearch_icon {
-                background-color: $background;
-            }
+        .mx_RoomSearch_shortcutPrompt {
+            display: none;
         }
     }
 
-    &.mx_RoomSearch_spotlightTrigger {
-        cursor: pointer;
-        min-width: 0;
+    &:hover {
+        background-color: $tertiary-content;
 
         .mx_RoomSearch_spotlightTriggerText {
-            color: $tertiary-content;
-            flex: 1;
-            min-width: 0;
-            // the following rules are to match that of a real input field
-            overflow: hidden;
-            margin: 9px;
-            font-weight: $font-semi-bold;
+            color: $background;
         }
 
-        &:hover {
-            background-color: $tertiary-content;
-
-            .mx_RoomSearch_spotlightTriggerText {
-                color: $background;
-            }
-
-            .mx_RoomSearch_shortcutPrompt {
-                background-color: $background;
-                color: $secondary-content;
-            }
+        .mx_RoomSearch_shortcutPrompt {
+            background-color: $background;
+            color: $secondary-content;
+        }
 
-            .mx_RoomSearch_icon {
-                background-color: $background;
-            }
+        .mx_RoomSearch_icon {
+            background-color: $background;
         }
     }
 }

src/components/structures/LeftPanel.tsx

@@ -304,14 +304,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         }
     };
 
-    private selectRoom = () => {
-        const firstRoom = this.listContainerRef.current.querySelector<HTMLDivElement>(".mx_RoomTile");
-        if (firstRoom) {
-            firstRoom.click();
-            return true; // to get the field to clear
-        }
-    };
-
     private renderBreadcrumbs(): React.ReactNode {
         if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) {
             return (
@@ -357,10 +349,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 onBlur={this.onBlur}
                 onKeyDown={this.onKeyDown}
             >
-                <RoomSearch
-                    isMinimized={this.props.isMinimized}
-                    onSelectRoom={this.selectRoom}
-                />
+                <RoomSearch isMinimized={this.props.isMinimized} />
 
                 { dialPadButton }
                 { rightButton }

src/components/structures/RoomSearch.tsx

@@ -28,10 +28,6 @@ import AccessibleButton from "../views/elements/AccessibleButton";
 
 interface IProps {
     isMinimized: boolean;
-    /**
-     * @returns true if a room has been selected and the search field should be cleared
-     */
-    onSelectRoom(): boolean;
 }
 
 export default class RoomSearch extends React.PureComponent<IProps> {
@@ -67,9 +63,9 @@ export default class RoomSearch extends React.PureComponent<IProps> {
             <div className="mx_RoomSearch_icon" />
         );
 
-        const shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
+        const shortcutPrompt = <kbd className="mx_RoomSearch_shortcutPrompt">
             { IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K" }
-        </div>;
+        </kbd>;
 
         return <AccessibleButton onClick={this.openSpotlight} className={classes}>
             { icon }