Bugfix. Filtering of contacts stopped working after refactoring

src/plugins/rosterview/filterview.js

@@ -5,7 +5,6 @@ import { _converse, api } from "@converse/headless/core";
 import { debounce } from "lodash-es";
 import { render } from 'lit-html';
 
-
 export const RosterFilter = Model.extend({
     initialize () {
         this.set({
@@ -13,10 +12,9 @@ export const RosterFilter = Model.extend({
             'filter_type': 'contacts',
             'chat_state': 'online'
         });
-    },
+    }
 });
 
-
 export class RosterFilterView extends ElementView {
     tagName = 'span';
 
@@ -30,8 +28,12 @@ export class RosterFilterView extends ElementView {
             this.model.save({'filter_text': this.querySelector('.roster-filter').value});
         }, 250);
 
-        this.listenTo(this.model, 'change:filter_type', this.render);
-        this.listenTo(this.model, 'change:filter_text', this.render);
+        this.listenTo(this.model, 'change', this.render);
+        this.listenTo(
+            this.model,
+            'change',
+            () => this.dispatchEvent(new CustomEvent('update', { 'detail': this.model.changed }))
+        );
 
         this.listenTo(_converse.roster, "add", this.render);
         this.listenTo(_converse.roster, "destroy", this.render);
@@ -102,5 +104,4 @@ export class RosterFilterView extends ElementView {
     }
 }
 
-
 api.elements.define('converse-roster-filter', RosterFilterView);

src/plugins/rosterview/rosterview.js

@@ -80,7 +80,7 @@ const RosterView = OrderedListView.extend({
 
     listenToRosterFilter () {
         this.filter_view = this.el.querySelector('converse-roster-filter');
-        this.listenTo(this.filter_view.model, 'change', this.updateFilter);
+        this.filter_view.addEventListener('update', () => this.updateFilter());
     },
 
     /**
@@ -91,6 +91,7 @@ const RosterView = OrderedListView.extend({
      * contact fetched from browser storage.
      */
     updateFilter: debounce(function () {
+        this.filter_view = this.el.querySelector('converse-roster-filter');
         const type = this.filter_view.model.get('filter_type');
         if (type === 'state') {
             this.filter(this.filter_view.model.get('chat_state'), type);
@@ -103,7 +104,6 @@ const RosterView = OrderedListView.extend({
         if (!u.isVisible(this.roster_el)) {
             u.showElement(this.roster_el);
         }
-        // this.filter_view.render();
         return this;
     },