From 0f9c49ca525e5845589a6de0cc7b4f94d39016eb Mon Sep 17 00:00:00 2001
From: ubermanu <e.vodor@gmail.com>
Date: Fri, 19 Mar 2021 16:06:36 +0100
Subject: [PATCH] focus the search input when opening the menu
---
src/plugins/sib-emoji-picker.js | 42 +++++++++++++++++++--------------
1 file changed, 24 insertions(+), 18 deletions(-)
diff --git a/src/plugins/sib-emoji-picker.js b/src/plugins/sib-emoji-picker.js
index d8a03ff..b2f9270 100644
--- a/src/plugins/sib-emoji-picker.js
+++ b/src/plugins/sib-emoji-picker.js
@@ -20,29 +20,36 @@ converse.plugins.add('sib-emoji-picker', {
const EmojiDropdownMixin = {
render() {
return html`
- <div class='dropup'>
- <button class='toggle-emojis'
- title='${__('Insert emojis')}'
- data-toggle='dropdown'
- aria-haspopup='true'
- aria-expanded='false'>
- <converse-icon
- class='fa fa-smile '
- path-prefix='${api.settings.get('assets_path')}'
- size='1em'></converse-icon>
+ <div class="dropup">
+ <button class="toggle-emojis"
+ title="${__('Insert emojis')}"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="false">
+ <converse-icon class="fa fa-smile"
+ path-prefix="${api.settings.get('assets_path')}"
+ size="1em"></converse-icon>
</button>
- <div class='dropdown-menu'>
- <converse-emoji-picker
- .chatview='${this.chatview}'
- .model='${this.model}'
+ <div class="dropdown-menu">
+ <converse-emoji-picker .chatview="${this.chatview}"
+ .model="${this.model}"
></converse-emoji-picker>
</div>
</div>`;
},
+ async showMenu() {
+ await _showMenu.apply(this, arguments);
+ setTimeout(() => {
+ // Focus the search input afterwards
+ const picker = this.querySelector('emoji-picker');
+ picker?.shadowRoot.querySelector('.search')?.focus();
+ })
+ },
};
// Apply mixin
const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+ const _showMenu = EmojiDropdown.prototype.showMenu;
Object.assign(EmojiDropdown.prototype, EmojiDropdownMixin);
/**
@@ -56,10 +63,9 @@ converse.plugins.add('sib-emoji-picker', {
},
render() {
return html`
- <emoji-picker
- .chatview='${this.chatview}'
- .model='${this.model}'
- @emoji-click='${ev => this.insertIntoTextArea(ev.detail.unicode)}'
+ <emoji-picker .chatview="${this.chatview}"
+ .model="${this.model}"
+ @emoji-click="${ev => this.insertIntoTextArea(ev.detail.unicode)}"
></emoji-picker>`;
},
};
--
GitLab