Avoid unnecessary call to requestUpdate and use updateComplete

This commit is contained in:
JC Brand 2022-02-09 21:07:03 +01:00
parent 8a9e0f6d23
commit d8f6a16936
4 changed files with 7 additions and 9 deletions

View File

@ -27,7 +27,7 @@ describe("Emojis", function () {
const message_form = view.querySelector('converse-muc-message-form');
message_form.onKeyDown(tab_event);
await u.waitUntil(() => view.querySelector('converse-emoji-picker .emoji-search')?.value === ':gri');
await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji', view).length === 3, 1000);
await u.waitUntil(() => sizzle('.emojis-lists__container--search .insert-emoji', view).length === 3, 1000);
let visible_emojis = sizzle('.emojis-lists__container--search .insert-emoji', view);
expect(visible_emojis[0].getAttribute('data-emoji')).toBe(':grimacing:');
expect(visible_emojis[1].getAttribute('data-emoji')).toBe(':grin:');

View File

@ -89,7 +89,8 @@ export default class EmojiDropdown extends DropdownBase {
if (!this.render_emojis) {
// Trigger an update so that emojis are rendered
this.render_emojis = true;
await this.requestUpdate();
this.requestUpdate();
await this.updateComplete;
}
super.showMenu();
setTimeout(() => this.querySelector('.emoji-search')?.focus());

View File

@ -19,7 +19,7 @@ export default class EmojiPicker extends CustomElement {
'current_category': { type: String, 'reflect': true },
'current_skintone': { type: String, 'reflect': true },
'model': { type: Object },
'query': { type: String, 'reflet': true },
'query': { type: String, 'reflect': true },
// This is an optimization, we lazily render the emoji picker, otherwise tests slow to a crawl.
'render_emojis': { type: Boolean },
}
@ -33,6 +33,7 @@ export default class EmojiPicker extends CustomElement {
constructor () {
super();
this.query = '';
this._search_results = [];
this.debouncedFilter = debounce(input => this.model.set({'query': input.value}), 250);
}
@ -103,7 +104,6 @@ export default class EmojiPicker extends CustomElement {
// Avoid re-rendering by only setting to new empty array if it wasn't empty before
this.search_results = [];
}
this.requestUpdate();
}
registerEvents () {

View File

@ -4,11 +4,6 @@ import { Events } from '@converse/skeletor/src/events.js';
export class CustomElement extends LitElement {
constructor () {
super();
Object.assign(this, Events);
}
createRenderRoot () {
// Render without the shadow DOM
return this;
@ -24,3 +19,5 @@ export class CustomElement extends LitElement {
this.stopListening();
}
}
Object.assign(CustomElement.prototype, Events);