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

@ -89,7 +89,8 @@ export default class EmojiDropdown extends DropdownBase {
if (!this.render_emojis) { if (!this.render_emojis) {
// Trigger an update so that emojis are rendered // Trigger an update so that emojis are rendered
this.render_emojis = true; this.render_emojis = true;
await this.requestUpdate(); this.requestUpdate();
await this.updateComplete;
} }
super.showMenu(); super.showMenu();
setTimeout(() => this.querySelector('.emoji-search')?.focus()); 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_category': { type: String, 'reflect': true },
'current_skintone': { type: String, 'reflect': true }, 'current_skintone': { type: String, 'reflect': true },
'model': { type: Object }, '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. // This is an optimization, we lazily render the emoji picker, otherwise tests slow to a crawl.
'render_emojis': { type: Boolean }, 'render_emojis': { type: Boolean },
} }
@ -33,6 +33,7 @@ export default class EmojiPicker extends CustomElement {
constructor () { constructor () {
super(); super();
this.query = '';
this._search_results = []; this._search_results = [];
this.debouncedFilter = debounce(input => this.model.set({'query': input.value}), 250); 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 // Avoid re-rendering by only setting to new empty array if it wasn't empty before
this.search_results = []; this.search_results = [];
} }
this.requestUpdate();
} }
registerEvents () { registerEvents () {

View File

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