diff --git a/frappe/public/js/frappe/icon_picker/icon_picker.js b/frappe/public/js/frappe/icon_picker/icon_picker.js index 85c5582ca7..0f2f5dc212 100644 --- a/frappe/public/js/frappe/icon_picker/icon_picker.js +++ b/frappe/public/js/frappe/icon_picker/icon_picker.js @@ -62,6 +62,37 @@ class Picker { // } // }); }); + this.search_input.on("input", (e) => { + e.preventDefault(); + this.filter_emojis(); + }); + } + filter_emojis() { + let value = this.search_input.val(); + let filtered_emoji_names = []; + if (value) { + gemoji.forEach((g) => { + g.tags.forEach((t) => { + if (t.includes(value)) { + filtered_emoji_names.push(g); + } + }); + g.names.forEach((t) => { + if (t.includes(value)) { + filtered_emoji_names.push(g); + } + }); + }); + } + + if (filtered_emoji_names.length == 0) { + this.emoji_wrapper.find(".emoji-wrapper").removeClass("hidden"); + } else { + this.emoji_wrapper.find(".emoji-wrapper").addClass("hidden"); + filtered_emoji_names.forEach((g) => { + this.emoji_wrapper.find(`.emoji-wrapper[id*='${g.emoji}']`).removeClass("hidden"); + }); + } } setup_emoji_container() { this.icon_picker_wrapper.find(".icon-section") diff --git a/frappe/public/scss/common/icon_picker.scss b/frappe/public/scss/common/icon_picker.scss index 185eac366b..92f02df057 100644 --- a/frappe/public/scss/common/icon_picker.scss +++ b/frappe/public/scss/common/icon_picker.scss @@ -51,6 +51,9 @@ left: 7px; } } + .form-tabs-list { + margin-top: 2px; + } } .icon-picker-popover { .picker-arrow {