Improve ease of focusing on Room list Search (#7255)

matrix-org · Dec 2, 2021 · 5169bca · 5169bca
1 parent 675901f
commit 5169bca
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -120,7 +120,6 @@ $roomListCollapsedWidth: 68px;
                 background-color: $panel-actions;
                 padding: 2px 4px;
                 user-select: none;
-                pointer-events: none;
                 font-size: $font-12px;
                 line-height: $font-15px;
                 font-weight: $font-semi-bold;

diff --git a/src/components/structures/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
@@ -46,7 +46,7 @@ interface IState {
 
 @replaceableComponent("structures.RoomSearch")
 export default class RoomSearch extends React.PureComponent<IProps, IState> {
-    private dispatcherRef: string;
+    private readonly dispatcherRef: string;
     private inputRef: React.RefObject<HTMLInputElement> = createRef();
     private searchFilter: NameFilterCondition = new NameFilterCondition();
 
@@ -136,9 +136,9 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         }
     };
 
-    public focus(): void {
+    public focus = (): void => {
         this.inputRef.current?.focus();
-    }
+    };
 
     public render(): React.ReactNode {
         const classes = classNames({
@@ -154,7 +154,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
         });
 
         let icon = (
-            <div className='mx_RoomSearch_icon' />
+            <div className="mx_RoomSearch_icon" onClick={this.focus} />
         );
         let input = (
             <input
@@ -178,7 +178,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
                 onClick={this.clearInput}
             />
         );
-        let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt">
+        let shortcutPrompt = <div className="mx_RoomSearch_shortcutPrompt" onClick={this.focus}>
             { isMac ? "⌘ K" : "Ctrl K" }
         </div>;