From c6710ef909481fd2fc16c10405f3daa92b6481fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Fri, 24 May 2024 20:02:51 +0200
Subject: [PATCH] FIX: couldn't select text after dismissing a reaction (#296)

On mobile (touch device more accurately), if you were to open the reaction picker and then dismiss it by clicking outside, you would not be able to select text anymore.

That's because sometimes, the `touchEnd` event wouldn't trigger, and we would not remove the `discourse-reactions-no-select` class on the `html` element.

In order to fix this, I move the removal of the `discourse-reactions-no-select` class to the `collapseAllPanels` method which is always called when clicking outside.

Ref - https://meta.discourse.org/t/opening-and-closing-the-reactions-menu-without-picking-a-reaction-disables-highlighting/287064

NOTE: there are no tests, because I couldn't figure out a reliable enough way to test it.
---
 .../widgets/discourse-reactions-actions.js          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/assets/javascripts/discourse/widgets/discourse-reactions-actions.js b/assets/javascripts/discourse/widgets/discourse-reactions-actions.js
index 5b4eb672..50ece250 100644
--- a/assets/javascripts/discourse/widgets/discourse-reactions-actions.js
+++ b/assets/javascripts/discourse/widgets/discourse-reactions-actions.js
@@ -105,6 +105,7 @@ export default createWidget("discourse-reactions-actions", {
   defaultState() {
     return {
       reactionsPickerExpanded: false,
+      statePanelExpanded: false,
     };
   },
 
@@ -172,9 +173,11 @@ export default createWidget("discourse-reactions-actions", {
     this._validTouch = true;
 
     cancel(this._touchTimeout);
+
     if (this.capabilities.touch) {
-      const root = document.getElementsByTagName("html")[0];
-      root?.classList?.add("discourse-reactions-no-select");
+      document
+        .querySelector("html")
+        ?.classList?.toggle("discourse-reactions-no-select", true);
 
       this._touchStartAt = Date.now();
       this._touchTimeout = later(() => {
@@ -199,9 +202,6 @@ export default createWidget("discourse-reactions-actions", {
       return;
     }
 
-    const root = document.getElementsByTagName("html")[0];
-    root && root.classList.remove("discourse-reactions-no-select");
-
     if (this.capabilities.touch) {
       if (event.originalEvent.changedTouches.length) {
         const endTarget = document.elementFromPoint(
@@ -581,6 +581,9 @@ export default createWidget("discourse-reactions-actions", {
 
   collapseAllPanels() {
     cancel(this._collapseHandler);
+    document
+      .querySelector("html")
+      ?.classList?.toggle("discourse-reactions-no-select", false);
     this._collapseHandler = null;
     this.state.statePanelExpanded = false;
     this.state.reactionsPickerExpanded = false;