From c662a99db3ee0d68845c154d0bcb2274fae47648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Thu, 14 Mar 2024 18:15:02 +0100
Subject: [PATCH] FIX: clicking "more..." in emoji autocomplete (#26176)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts the "fix" made in 44f6b24e349b35150247e450a4c4178abd45dabd 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.
---
 .../javascripts/discourse/app/components/emoji-picker.js  | 6 +++---
 app/assets/javascripts/discourse/app/lib/autocomplete.js  | 8 +++-----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index c02e2e9be4f..9d695ee8f58 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -92,6 +92,8 @@ export default Component.extend({
         return;
       }
 
+      document.addEventListener("click", this.handleOutsideClick);
+
       const popperAnchor = this._getPopperAnchor();
 
       if (!this.site.isMobileDevice && this.usePopper && popperAnchor) {
@@ -137,8 +139,6 @@ export default Component.extend({
       // of blocking the rendering of the picker
       discourseLater(() => {
         schedule("afterRender", () => {
-          document.addEventListener("click", this.handleOutsideClick);
-
           if (!this.site.isMobileDevice || this.isEditorFocused) {
             emojiPicker.querySelector("input.filter")?.focus();
 
@@ -465,7 +465,7 @@ export default Component.extend({
 
   @bind
   handleOutsideClick(event) {
-    if (!document.querySelector(".emoji-picker")?.contains(event.target)) {
+    if (!event.target.closest(".emoji-picker")) {
       this.onClose(event);
     }
   },
diff --git a/app/assets/javascripts/discourse/app/lib/autocomplete.js b/app/assets/javascripts/discourse/app/lib/autocomplete.js
index 43424f57929..46e441e9418 100644
--- a/app/assets/javascripts/discourse/app/lib/autocomplete.js
+++ b/app/assets/javascripts/discourse/app/lib/autocomplete.js
@@ -148,11 +148,8 @@ export default function (options) {
 
   function closeAutocomplete() {
     _autoCompletePopper?.destroy();
-    options.onClose && options.onClose();
-
-    if (div) {
-      div.hide().remove();
-    }
+    options.onClose?.();
+    div?.hide()?.remove();
     div = null;
     scrollElement = null;
     completeStart = null;
@@ -376,6 +373,7 @@ export default function (options) {
     ul.find("li").click(async function ({ originalEvent }) {
       // this is required to prevent the default behaviour when clicking on a <a> tag
       originalEvent.preventDefault();
+      originalEvent.stopPropagation();
 
       selectedOption = ul.find("li").index(this);
       // hack for Gboard, see meta.discourse.org/t/-/187009/24