Auto expand room list on search

src/components/structures/RoomSearch.tsx

@@ -76,6 +76,7 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private clearInput = () => {
         if (!this.inputRef.current) return;
         this.inputRef.current.value = "";
+        defaultDispatcher.dispatch({action: Action.StopRoomFilter})
         this.onChange();
     };
 
@@ -102,9 +103,15 @@ export default class RoomSearch extends React.PureComponent<IProps, IState> {
     private onFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
         this.setState({focused: true});
         ev.target.select();
+        if (ev.target.value === "") {
+            defaultDispatcher.dispatch({action: Action.StartRoomFilter})
+        }
     };
 
-    private onBlur = () => {
+    private onBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
+        if (ev.target.value === "") {
+            defaultDispatcher.dispatch({action: Action.StopRoomFilter})
+        }
         this.setState({focused: false});
     };
 

src/components/views/rooms/RoomList2.tsx

@@ -194,6 +194,17 @@ export default class RoomList2 extends React.Component<IProps, IState> {
                     show_room_tile: true, // to make sure the room gets scrolled into view
                 });
             }
+        } else if (payload.action === Action.StartRoomFilter) {
+            this.state.layouts.forEach(x => {
+                x.saveCollapsedState();
+                x.isCollapsed = false;
+            });
+            this.forceUpdate();
+        } else if (payload.action === Action.StopRoomFilter) {
+            this.state.layouts.forEach(x => {
+                x.restoreCollapsedState();
+            });
+            this.forceUpdate();
         }
     };
 

src/dispatcher/actions.ts

@@ -84,4 +84,14 @@ export enum Action {
      * Changes room based on room list order and payload parameters. Should be used with ViewRoomDeltaPayload.
      */
     ViewRoomDelta = "view_room_delta",
+
+    /**
+     * Informs the room list when room filtering has begun. No additional payload information required.
+     */
+    StartRoomFilter = "start_room_filter",
+
+     /**
+      * Informs the room list when room filtering has ended. No additional payload information required.
+      */
+    StopRoomFilter = "stop_room_filter",
 }

src/stores/room-list/ListLayout.ts

@@ -26,12 +26,14 @@ interface ISerializedListLayout {
     numTiles: number;
     showPreviews: boolean;
     collapsed: boolean;
+    savedCollapsed: boolean;
 }
 
 export class ListLayout {
     private _n = 0;
     private _previews = false;
     private _collapsed = false;
+    private _savedCollapsed = false;
 
     constructor(public readonly tagId: TagID) {
         const serialized = localStorage.getItem(this.key);
@@ -41,6 +43,7 @@ export class ListLayout {
             this._n = parsed.numTiles;
             this._previews = parsed.showPreviews;
             this._collapsed = parsed.collapsed;
+            this._savedCollapsed = parsed.savedCollapsed;
         }
     }
 
@@ -136,11 +139,20 @@ export class ListLayout {
         localStorage.setItem(this.key, JSON.stringify(this.serialize()));
     }
 
+    public saveCollapsedState() {
+        this._savedCollapsed = this.isCollapsed;
+    }
+
+    public restoreCollapsedState() {
+        this.isCollapsed = this._savedCollapsed;
+    }
+
     private serialize(): ISerializedListLayout {
         return {
             numTiles: this.visibleTiles,
             showPreviews: this.showPreviews,
             collapsed: this.isCollapsed,
+            savedCollapsed: this._savedCollapsed,
         };
     }
 }