StatusReactionWrapper: put the picker in a portal

2023-02-08 20:26:37 -06:00 · 2023-02-08 20:26:37 -06:00 · 6f15b5f42f
parent 06ea520e89
commit 6f15b5f42f
1 changed files with 9 additions and 6 deletions
--- a/app/soapbox/components/status-reaction-wrapper.tsx
+++ b/app/soapbox/components/status-reaction-wrapper.tsx
@ -1,3 +1,4 @@
+import { Portal } from '@reach/portal';
 import React, { useState, useEffect, useRef } from 'react';

 import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts';
@ -105,12 +106,14 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
        ref: setReferenceElement,
      })}

-      <EmojiSelector
-        placement='top-start'
-        referenceElement={referenceElement}
-        onReact={handleReact}
-        visible={visible}
-      />
+      <Portal>
+        <EmojiSelector
+          placement='top-start'
+          referenceElement={referenceElement}
+          onReact={handleReact}
+          visible={visible}
+        />
+      </Portal>
    </div>
  );
 };