FIX: clicking "more..." in emoji autocomplete (#26176)

This reverts the "fix" made in 44f6b24e34 since it wasn't the correct fix and the emoji picker wasn't showing in chat 🤦‍♂️

The proper fix is to `stopPropagation()` on the `click` event since the click handler has been made `async`. `preventDefault()` isn't enough.
This commit is contained in:
Régis Hanol 2024-03-14 18:15:02 +01:00 committed by GitHub
parent dedf1a5e03
commit c662a99db3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 8 deletions

View File

@ -92,6 +92,8 @@ export default Component.extend({
return; return;
} }
document.addEventListener("click", this.handleOutsideClick);
const popperAnchor = this._getPopperAnchor(); const popperAnchor = this._getPopperAnchor();
if (!this.site.isMobileDevice && this.usePopper && popperAnchor) { if (!this.site.isMobileDevice && this.usePopper && popperAnchor) {
@ -137,8 +139,6 @@ export default Component.extend({
// of blocking the rendering of the picker // of blocking the rendering of the picker
discourseLater(() => { discourseLater(() => {
schedule("afterRender", () => { schedule("afterRender", () => {
document.addEventListener("click", this.handleOutsideClick);
if (!this.site.isMobileDevice || this.isEditorFocused) { if (!this.site.isMobileDevice || this.isEditorFocused) {
emojiPicker.querySelector("input.filter")?.focus(); emojiPicker.querySelector("input.filter")?.focus();
@ -465,7 +465,7 @@ export default Component.extend({
@bind @bind
handleOutsideClick(event) { handleOutsideClick(event) {
if (!document.querySelector(".emoji-picker")?.contains(event.target)) { if (!event.target.closest(".emoji-picker")) {
this.onClose(event); this.onClose(event);
} }
}, },

View File

@ -148,11 +148,8 @@ export default function (options) {
function closeAutocomplete() { function closeAutocomplete() {
_autoCompletePopper?.destroy(); _autoCompletePopper?.destroy();
options.onClose && options.onClose(); options.onClose?.();
div?.hide()?.remove();
if (div) {
div.hide().remove();
}
div = null; div = null;
scrollElement = null; scrollElement = null;
completeStart = null; completeStart = null;
@ -376,6 +373,7 @@ export default function (options) {
ul.find("li").click(async function ({ originalEvent }) { ul.find("li").click(async function ({ originalEvent }) {
// this is required to prevent the default behaviour when clicking on a <a> tag // this is required to prevent the default behaviour when clicking on a <a> tag
originalEvent.preventDefault(); originalEvent.preventDefault();
originalEvent.stopPropagation();
selectedOption = ul.find("li").index(this); selectedOption = ul.find("li").index(this);
// hack for Gboard, see meta.discourse.org/t/-/187009/24 // hack for Gboard, see meta.discourse.org/t/-/187009/24