From 42ba7000391c563310637ded518cebab3af3ffab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 31 Aug 2024 14:00:29 +0200
Subject: [PATCH] Add flip middleware to emoji picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../containers/emoji-picker-dropdown-container.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
index 1b72306def..c6359a5d3d 100644
--- a/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -1,10 +1,9 @@
-import { useFloating, shift } from '@floating-ui/react';
+import { useFloating, shift, flip } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { KeyboardEvent, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { IconButton } from 'pl-fe/components/ui';
+import { IconButton, Portal } from 'pl-fe/components/ui';
 import { useClickOutside } from 'pl-fe/hooks';
 
 import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
@@ -21,7 +20,7 @@ const EmojiPickerDropdownContainer = (
   const [visible, setVisible] = useState(false);
 
   const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
-    middleware: [shift()],
+    middleware: [flip(), shift()],
   });
 
   useClickOutside(refs, () => {
@@ -50,7 +49,7 @@ const EmojiPickerDropdownContainer = (
         tabIndex={0}
       />
 
-      {createPortal(
+      <Portal>
         <div
           className='z-[101]'
           ref={refs.setFloating}
@@ -67,9 +66,8 @@ const EmojiPickerDropdownContainer = (
             update={update}
             {...props}
           />
-        </div>,
-        document.body,
-      )}
+        </div>
+      </Portal>
     </div>
   );
 };