Avoid unnecessary call to requestUpdate and use updateComplete

src/plugins/muc-views/tests/emojis.js

@@ -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:');

src/shared/chat/emoji-dropdown.js

@@ -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());

src/shared/chat/emoji-picker.js

@@ -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 () {

src/shared/components/element.js

@@ -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);