fix: Adding reaction unfocuses comment thread

fix: Scrollable area of reaction picker larger than dialog

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}
       />

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%;
 `;

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);
 }

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,

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>
   );