Fix tooltip placement bugs by upgrading Popper

ts/components/MediaQualitySelector.tsx

@@ -103,7 +103,7 @@ export const MediaQualitySelector = ({
       </Reference>
       {menuShowing && popperRoot
         ? createPortal(
-            <Popper placement="top-start" positionFixed>
+            <Popper placement="top-start" strategy="fixed">
               {({ ref, style, placement }) => (
                 <div
                   className="MediaQualitySelector__popper"

ts/components/Tooltip.tsx

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
 import { Manager, Reference, Popper } from 'react-popper';
 import { Theme, themeClassName } from '../util/theme';
 import { multiRef } from '../util/multiRef';
+import { offsetDistanceModifier } from '../util/popperUtil';
 
 type EventWrapperPropsType = {
   children: React.ReactNode;
@@ -96,7 +97,7 @@ export const Tooltip: React.FC<PropsType> = ({
           </TooltipEventWrapper>
         )}
       </Reference>
-      <Popper placement={direction}>
+      <Popper placement={direction} modifiers={[offsetDistanceModifier(12)]}>
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
             <div

ts/components/conversation/Message.tsx

@@ -63,6 +63,7 @@ import { createRefMerger } from '../_util';
 import { emojiToData } from '../emoji/lib';
 import { SmartReactionPicker } from '../../state/smart/ReactionPicker';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
+import { offsetDistanceModifier } from '../../util/popperUtil';
 
 type Trigger = {
   handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -1429,7 +1430,7 @@ export class Message extends React.Component<Props, State> {
         {reactionPickerRoot &&
           createPortal(
             // eslint-disable-next-line consistent-return
-            <Popper placement="top">
+            <Popper placement="top" modifiers={[offsetDistanceModifier(4)]}>
               {({ ref, style }) => (
                 <SmartReactionPicker
                   ref={ref}

ts/components/emoji/EmojiButton.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -129,7 +129,7 @@ export const EmojiButton = React.memo(
         </Reference>
         {open && popperRoot
           ? createPortal(
-              <Popper placement="top-start" positionFixed>
+              <Popper placement="top-start" strategy="fixed">
                 {({ ref, style }) => (
                   <EmojiPicker
                     ref={ref}

ts/components/stickers/StickerButton.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -10,6 +10,7 @@ import { StickerPicker } from './StickerPicker';
 import { countStickers } from './lib';
 import { StickerPackType, StickerType } from '../../state/ducks/stickers';
 import { LocalizerType } from '../../types/Util';
+import { offsetDistanceModifier } from '../../util/popperUtil';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
@@ -202,7 +203,11 @@ export const StickerButton = React.memo(
           )}
         </Reference>
         {!open && !showIntroduction && installedPack ? (
-          <Popper placement={position} key={installedPack.id}>
+          <Popper
+            placement={position}
+            key={installedPack.id}
+            modifiers={[offsetDistanceModifier(6)]}
+          >
             {({ ref, style, placement, arrowProps }) => (
               <button
                 type="button"
@@ -239,7 +244,7 @@ export const StickerButton = React.memo(
           </Popper>
         ) : null}
         {!open && showIntroduction ? (
-          <Popper placement={position}>
+          <Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
             {({ ref, style, placement, arrowProps }) => (
               <button
                 type="button"

ts/quill/emoji/completion.tsx

@@ -19,6 +19,7 @@ import {
 import { Emoji } from '../../components/emoji/Emoji';
 import { EmojiPickDataType } from '../../components/emoji/EmojiPicker';
 import { getBlotTextPartitions, matchBlotTextPartitions } from '../util';
+import { sameWidthModifier } from '../../util/popperUtil';
 
 const Keyboard = Quill.import('modules/keyboard');
 
@@ -265,25 +266,7 @@ export class EmojiCompletion {
     }
 
     const element = createPortal(
-      <Popper
-        placement="top"
-        modifiers={{
-          width: {
-            enabled: true,
-            fn: oldData => {
-              const data = oldData;
-              const { width, left } = data.offsets.reference;
-
-              data.styles.width = `${width}px`;
-              data.offsets.popper.width = width;
-              data.offsets.popper.left = left;
-
-              return data;
-            },
-            order: 840,
-          },
-        }}
-      >
+      <Popper placement="top-start" modifiers={[sameWidthModifier]}>
         {({ ref, style }) => (
           <div
             ref={ref}

ts/quill/mentions/completion.tsx

@@ -14,6 +14,7 @@ import { Avatar } from '../../components/Avatar';
 import { LocalizerType } from '../../types/Util';
 import { MemberRepository } from '../memberRepository';
 import { matchBlotTextPartitions } from '../util';
+import { sameWidthModifier } from '../../util/popperUtil';
 
 export type MentionCompletionOptions = {
   i18n: LocalizerType;
@@ -218,25 +219,7 @@ export class MentionCompletion {
     }
 
     const element = createPortal(
-      <Popper
-        placement="top"
-        modifiers={{
-          width: {
-            enabled: true,
-            fn: oldData => {
-              const data = oldData;
-              const { width, left } = data.offsets.reference;
-
-              data.styles.width = `${width}px`;
-              data.offsets.popper.width = width;
-              data.offsets.popper.left = left;
-
-              return data;
-            },
-            order: 840,
-          },
-        }}
-      >
+      <Popper placement="top-start" modifiers={[sameWidthModifier]}>
         {({ ref, style }) => (
           <div
             ref={ref}

ts/util/popperUtil.ts

@@ -0,0 +1,33 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { Modifier } from '@popperjs/core';
+import type { OffsetModifier } from '@popperjs/core/lib/modifiers/offset';
+
+/**
+ * Shorthand for the [offset modifier][0] when you just wanna set the distance.
+ *
+ * [0]: https://popper.js.org/docs/v2/modifiers/offset/
+ */
+export const offsetDistanceModifier = (
+  distance: number
+): Partial<OffsetModifier> => ({
+  name: 'offset',
+  options: { offset: [undefined, distance] },
+});
+
+/**
+ * Make the popper element the same width as the reference, even when you resize.
+ *
+ * Should probably be used with the "top-start", "top-end", "bottom-start", or
+ * "bottom-end" placement.
+ */
+export const sameWidthModifier: Modifier<'sameWidth', unknown> = {
+  name: 'sameWidth',
+  enabled: true,
+  phase: 'write',
+  fn({ state }) {
+    // eslint-disable-next-line no-param-reassign
+    state.elements.popper.style.width = `${state.rects.reference.width}px`;
+  },
+};