Fix click propagating from reaction viewer to container

signalapp · Oct 4, 2021 · 9a9fc60 · 9a9fc60
1 parent 54e7cd2
commit 9a9fc60
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 42 deletions.
diff --git a/ts/components/StopPropagation.tsx b/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>
+);
diff --git a/ts/components/conversation/Message.tsx b/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,30 +1449,32 @@ export class Message extends React.PureComponent<Props, State> {
         </div>
         {reactionPickerRoot &&
           createPortal(
-            <Popper
-              placement="top"
-              modifiers={[
-                offsetDistanceModifier(4),
-                this.popperPreventOverflowModifier(),
-              ]}
-            >
-              {({ ref, style }) =>
-                renderReactionPicker({
-                  ref,
-                  style,
-                  selected: selectedReaction,
-                  onClose: this.toggleReactionPicker,
-                  onPick: emoji => {
-                    this.toggleReactionPicker(true);
-                    reactToMessage(id, {
-                      emoji,
-                      remove: emoji === selectedReaction,
-                    });
-                  },
-                  renderEmojiPicker,
-                })
-              }
-            </Popper>,
+            <StopPropagation>
+              <Popper
+                placement="top"
+                modifiers={[
+                  offsetDistanceModifier(4),
+                  this.popperPreventOverflowModifier(),
+                ]}
+              >
+                {({ ref, style }) =>
+                  renderReactionPicker({
+                    ref,
+                    style,
+                    selected: selectedReaction,
+                    onClose: this.toggleReactionPicker,
+                    onPick: emoji => {
+                      this.toggleReactionPicker(true);
+                      reactToMessage(id, {
+                        emoji,
+                        remove: emoji === selectedReaction,
+                      });
+                    },
+                    renderEmojiPicker,
+                  })
+                }
+              </Popper>
+            </StopPropagation>,
             reactionPickerRoot
           )}
       </Manager>
@@ -2050,24 +2053,26 @@ export class Message extends React.PureComponent<Props, State> {
         </Reference>
         {reactionViewerRoot &&
           createPortal(
-            <Popper
-              placement={popperPlacement}
-              strategy="fixed"
-              modifiers={[this.popperPreventOverflowModifier()]}
-            >
-              {({ ref, style }) => (
-                <ReactionViewer
-                  ref={ref}
-                  style={{
-                    ...style,
-                    zIndex: 2,
-                  }}
-                  reactions={reactions}
-                  i18n={i18n}
-                  onClose={this.toggleReactionViewer}
-                />
-              )}
-            </Popper>,
+            <StopPropagation>
+              <Popper
+                placement={popperPlacement}
+                strategy="fixed"
+                modifiers={[this.popperPreventOverflowModifier()]}
+              >
+                {({ ref, style }) => (
+                  <ReactionViewer
+                    ref={ref}
+                    style={{
+                      ...style,
+                      zIndex: 2,
+                    }}
+                    reactions={reactions}
+                    i18n={i18n}
+                    onClose={this.toggleReactionViewer}
+                  />
+                )}
+              </Popper>
+            </StopPropagation>,
             reactionViewerRoot
           )}
       </Manager>