import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import View from '!view!./user-list.html';

import { ChatRoom } from '../room';
import { ChatUser } from '../user';
import { AppChatUserListItem } from './item/item';
import { fuzzysearch } from '../../../../lib/gj-lib-client/utils/string';
import { findVueParent } from '../../../../lib/gj-lib-client/utils/vue';
import { AppScrollInviewParent } from '../../../../lib/gj-lib-client/components/scroll/inview/parent';

@View
@Component({
	components: {
		AppChatUserListItem,
	},
})
export class AppChatUserList extends Vue {
	@Prop(Array) users: ChatUser[];
	@Prop(ChatRoom) room?: ChatRoom;
	@Prop(Boolean) showPm?: boolean;
	@Prop(Boolean) showModTools?: boolean;

	filterQuery = '';

	get filteredUsers() {
		if (!this.filterQuery) {
			return this.users;
		}

		const filter = this.filterQuery.toLowerCase();
		return this.users.filter(
			i =>
				fuzzysearch(filter, i.displayName.toLowerCase()) ||
				fuzzysearch(filter, i.username.toLowerCase())
		);
	}

	/**
	 * When our list changes, make sure to recheck items in view since things shifted.
	 */
	@Watch('filteredUsers')
	onUsersChange() {
		const inviewParent = findVueParent(this, AppScrollInviewParent);
		if (inviewParent) {
			inviewParent.container.queueCheck();
		}
	}
}

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import View from '!view!./user-list.html';

import { ChatRoom } from '../room';
import { ChatUser } from '../user';
import { AppChatUserListItem } from './item/item';
import { fuzzysearch } from '../../../../lib/gj-lib-client/utils/string';

@View
@Component({
	components: {
		AppChatUserListItem,
	},
})
export class AppChatUserList extends Vue {
	@Prop(Array) users: ChatUser[];
	@Prop(ChatRoom) room?: ChatRoom;
	@Prop(Boolean) showPm?: boolean;
	@Prop(Boolean) showModTools?: boolean;

	filterQuery = '';
	// inviewUsers: { [k: string]: boolean } = {};

	get filteredUsers() {
		if (!this.filterQuery) {
			return this.users;
		}

		const filter = this.filterQuery.toLowerCase();
		return this.users.filter(
			i =>
				fuzzysearch(filter, i.displayName.toLowerCase()) ||
				fuzzysearch(filter, i.username.toLowerCase())
		);
	}
}

--- 
+++ 
@@ -1,11 +1,13 @@
 import Vue from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
+import { Component, Prop, Watch } from 'vue-property-decorator';
 import View from '!view!./user-list.html';
 
 import { ChatRoom } from '../room';
 import { ChatUser } from '../user';
 import { AppChatUserListItem } from './item/item';
 import { fuzzysearch } from '../../../../lib/gj-lib-client/utils/string';
+import { findVueParent } from '../../../../lib/gj-lib-client/utils/vue';
+import { AppScrollInviewParent } from '../../../../lib/gj-lib-client/components/scroll/inview/parent';
 
 @View
 @Component({
@@ -20,7 +22,6 @@
 	@Prop(Boolean) showModTools?: boolean;
 
 	filterQuery = '';
-	// inviewUsers: { [k: string]: boolean } = {};
 
 	get filteredUsers() {
 		if (!this.filterQuery) {
@@ -34,4 +35,15 @@
 				fuzzysearch(filter, i.username.toLowerCase())
 		);
 	}
+
+	/**
+	 * When our list changes, make sure to recheck items in view since things shifted.
+	 */
+	@Watch('filteredUsers')
+	onUsersChange() {
+		const inviewParent = findVueParent(this, AppScrollInviewParent);
+		if (inviewParent) {
+			inviewParent.container.queueCheck();
+		}
+	}
 }
Fix up chat user list to tell its scroll-inview-parent when things change.
