From e42739ec810b05f7bf1c1b476eb84ca9e98da964 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Thu, 30 Sep 2021 17:19:42 +0200
Subject: [PATCH] scroll room list to top when entering query first

---
 .../session/leftpanel/LeftPanelViewModel.js   |  3 ++
 src/observable/map/ApplyMap.js                |  4 +++
 .../web/ui/session/leftpanel/LeftPanelView.js | 34 +++++++++++--------
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/domain/session/leftpanel/LeftPanelViewModel.js b/src/domain/session/leftpanel/LeftPanelViewModel.js
index 13583b14..59b68ca1 100644
--- a/src/domain/session/leftpanel/LeftPanelViewModel.js
+++ b/src/domain/session/leftpanel/LeftPanelViewModel.js
@@ -127,11 +127,14 @@ export class LeftPanelViewModel extends ViewModel {
         query = query.trim();
         if (query.length === 0) {
             this.clearFilter();
+            return false;
         } else {
+            const startFiltering = !this._tileViewModelsFilterMap.hasApply();
             const filter = new RoomFilter(query);
             this._tileViewModelsFilterMap.setApply((roomId, vm) => {
                 vm.hidden = !filter.matches(vm);
             });
+            return startFiltering;
         }
     }
 }
diff --git a/src/observable/map/ApplyMap.js b/src/observable/map/ApplyMap.js
index feab968c..ad345595 100644
--- a/src/observable/map/ApplyMap.js
+++ b/src/observable/map/ApplyMap.js
@@ -24,6 +24,10 @@ export class ApplyMap extends BaseObservableMap {
         this._subscription = null;
     }
 
+    hasApply() {
+        return !!this._apply;
+    }
+
     setApply(apply) {
         this._apply = apply;
         if (apply) {
diff --git a/src/platform/web/ui/session/leftpanel/LeftPanelView.js b/src/platform/web/ui/session/leftpanel/LeftPanelView.js
index 7742b93e..481c5362 100644
--- a/src/platform/web/ui/session/leftpanel/LeftPanelView.js
+++ b/src/platform/web/ui/session/leftpanel/LeftPanelView.js
@@ -58,6 +58,19 @@ export class LeftPanelView extends TemplateView {
                 vm.i18n`Show single room` :
                 vm.i18n`Enable grid layout`;
         };
+        const roomList = t.view(new ListView(
+            {
+                className: "RoomList",
+                list: vm.tileViewModels,
+            },
+            tileVM => {
+                if (tileVM.kind === "invite") {
+                    return new InviteTileView(tileVM);
+                } else {
+                    return new RoomTileView(tileVM);
+                }
+            }
+        ));
         const utilitiesRow = t.div({className: "utilities"}, [
             t.a({className: "button-utility close-session", href: vm.closeUrl, "aria-label": vm.i18n`Back to account list`, title: vm.i18n`Back to account list`}),
             t.view(new FilterField({
@@ -65,7 +78,12 @@ export class LeftPanelView extends TemplateView {
                 label: vm.i18n`Filter rooms…`,
                 name: "room-filter",
                 autocomplete: true,
-                set: query => vm.setFilter(query),
+                set: query => {
+                    // scroll up if we just started filtering
+                    if (vm.setFilter(query)) {
+                        roomList.scrollTop = 0;
+                    }
+                },
                 clear: () => vm.clearFilter()
             })),
             t.button({
@@ -83,19 +101,7 @@ export class LeftPanelView extends TemplateView {
 
         return t.div({className: "LeftPanel"}, [
             utilitiesRow,
-            t.view(new ListView(
-                {
-                    className: "RoomList",
-                    list: vm.tileViewModels,
-                },
-                tileVM => {
-                    if (tileVM.kind === "invite") {
-                        return new InviteTileView(tileVM);
-                    } else {
-                        return new RoomTileView(tileVM);
-                    }
-                }
-            ))
+            roomList
         ]);
     }
 }