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 ]); } }