Fix click propagating from reaction viewer to container

ts/components/StopPropagation.tsx

@@ -0,0 +1,15 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ReactNode } from 'react';
+
+// Whenever you don't want click events to propagate into their parent container
+export const StopPropagation = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => (
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+  <div onClick={ev => ev.stopPropagation()}>{children}</div>
+);

ts/components/conversation/Message.tsx

@@ -68,6 +68,7 @@ import type { SmartReactionPicker } from '../../state/smart/ReactionPicker';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
 import { offsetDistanceModifier } from '../../util/popperUtil';
 import * as KeyboardLayout from '../../services/keyboardLayout';
+import { StopPropagation } from '../StopPropagation';
 
 type Trigger = {
   handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -1448,6 +1449,7 @@ export class Message extends React.PureComponent<Props, State> {
         </div>
         {reactionPickerRoot &&
           createPortal(
+            <StopPropagation>
               <Popper
                 placement="top"
                 modifiers={[
@@ -1471,7 +1473,8 @@ export class Message extends React.PureComponent<Props, State> {
                     renderEmojiPicker,
                   })
                 }
-            </Popper>,
+              </Popper>
+            </StopPropagation>,
             reactionPickerRoot
           )}
       </Manager>
@@ -2050,6 +2053,7 @@ export class Message extends React.PureComponent<Props, State> {
         </Reference>
         {reactionViewerRoot &&
           createPortal(
+            <StopPropagation>
               <Popper
                 placement={popperPlacement}
                 strategy="fixed"
@@ -2067,7 +2071,8 @@ export class Message extends React.PureComponent<Props, State> {
                     onClose={this.toggleReactionViewer}
                   />
                 )}
-            </Popper>,
+              </Popper>
+            </StopPropagation>,
             reactionViewerRoot
           )}
       </Manager>