From 9b03b529f871ee2d25fb16a3ca8dc2e7dddf6e17 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 2 Nov 2024 21:23:38 -0400
Subject: [PATCH] fix: Adding reaction unfocuses comment thread fix: Scrollable
 area of reaction picker larger than dialog

---
 app/components/IconPicker/components/EmojiPanel.tsx | 10 ++++------
 app/components/Reactions/ReactionPicker.tsx         | 11 ++++-------
 app/hooks/useOnClickOutside.ts                      |  2 +-
 app/scenes/Document/components/CommentThread.tsx    |  3 ++-
 shared/components/EventBoundary.tsx                 |  4 ++--
 5 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/app/components/IconPicker/components/EmojiPanel.tsx b/app/components/IconPicker/components/EmojiPanel.tsx
index 1bc22a362a..2297d029e4 100644
--- a/app/components/IconPicker/components/EmojiPanel.tsx
+++ b/app/components/IconPicker/components/EmojiPanel.tsx
@@ -18,11 +18,7 @@ import {
 import GridTemplate, { DataNode } from "./GridTemplate";
 import SkinTonePicker from "./SkinTonePicker";
 
-/**
- * This is needed as a constant for react-window.
- * Calculated from the heights of TabPanel and InputSearch.
- */
-const GRID_HEIGHT = 362;
+const GRID_HEIGHT = 410;
 
 const useEmojiState = () => {
   const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
@@ -80,6 +76,7 @@ type Props = {
   panelWidth: number;
   query: string;
   panelActive: boolean;
+  height?: number;
   onEmojiChange: (emoji: string) => void;
   onQueryChange: (query: string) => void;
 };
@@ -90,6 +87,7 @@ const EmojiPanel = ({
   panelActive,
   onEmojiChange,
   onQueryChange,
+  height = GRID_HEIGHT,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -159,7 +157,7 @@ const EmojiPanel = ({
       <GridTemplate
         ref={scrollableRef}
         width={panelWidth}
-        height={GRID_HEIGHT}
+        height={height - 48}
         data={templateData}
         onIconSelect={handleEmojiSelection}
       />
diff --git a/app/components/Reactions/ReactionPicker.tsx b/app/components/Reactions/ReactionPicker.tsx
index 2b99d704f2..72e329fc25 100644
--- a/app/components/Reactions/ReactionPicker.tsx
+++ b/app/components/Reactions/ReactionPicker.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { PopoverDisclosure, usePopoverState } from "reakit";
 import styled from "styled-components";
+import EventBoundary from "@shared/components/EventBoundary";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
@@ -119,15 +120,16 @@ const ReactionPicker: React.FC<Props> = ({
       >
         {popover.visible && (
           <React.Suspense fallback={<Placeholder />}>
-            <ScrollableContainer>
+            <EventBoundary>
               <EmojiPanel
+                height={300}
                 panelWidth={panelWidth}
                 query={query}
                 onEmojiChange={handleEmojiSelect}
                 onQueryChange={setQuery}
                 panelActive
               />
-            </ScrollableContainer>
+            </EventBoundary>
           </React.Suspense>
         )}
       </Popover>
@@ -149,11 +151,6 @@ const Placeholder = React.memo(
 );
 Placeholder.displayName = "ReactionPickerPlaceholder";
 
-const ScrollableContainer = styled.div`
-  height: 300px;
-  overflow-y: auto;
-`;
-
 const PopoverButton = styled(NudeButton)`
   border-radius: 50%;
 `;
diff --git a/app/hooks/useOnClickOutside.ts b/app/hooks/useOnClickOutside.ts
index 6a23447bfe..2a58024da1 100644
--- a/app/hooks/useOnClickOutside.ts
+++ b/app/hooks/useOnClickOutside.ts
@@ -23,6 +23,6 @@ export default function useOnClickOutside(
     [ref, callback]
   );
 
-  useEventListener("mousedown", listener, window, options);
+  useEventListener("pointerdown", listener, window, options);
   useEventListener("touchstart", listener, window, options);
 }
diff --git a/app/scenes/Document/components/CommentThread.tsx b/app/scenes/Document/components/CommentThread.tsx
index bde2dc6d6f..bfc262c3d3 100644
--- a/app/scenes/Document/components/CommentThread.tsx
+++ b/app/scenes/Document/components/CommentThread.tsx
@@ -100,7 +100,8 @@ function CommentThread({
   useOnClickOutside(topRef, (event) => {
     if (
       focused &&
-      !(event.target as HTMLElement).classList.contains("comment")
+      !(event.target as HTMLElement).classList.contains("comment") &&
+      event.defaultPrevented === false
     ) {
       history.replace({
         search: location.search,
diff --git a/shared/components/EventBoundary.tsx b/shared/components/EventBoundary.tsx
index 83ec19dea1..a47e9a6096 100644
--- a/shared/components/EventBoundary.tsx
+++ b/shared/components/EventBoundary.tsx
@@ -6,13 +6,13 @@ type Props = {
 };
 
 const EventBoundary: React.FC<Props> = ({ children, className }: Props) => {
-  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
+  const handlePointerDown = React.useCallback((event: React.SyntheticEvent) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);
 
   return (
-    <span onClick={handleClick} className={className}>
+    <span onPointerDown={handlePointerDown} className={className}>
       {children}
     </span>
   );