From 50d3631bc477387801d6ae8406ef2718387559ce Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Sun, 22 Aug 2021 18:15:20 +0530
Subject: [PATCH] fixed emojiboard opening

---
 src/app/organisms/channel/ChannelViewContent.jsx   | 7 ++++---
 src/app/organisms/channel/ChannelViewInput.jsx     | 6 +++---
 src/app/organisms/emoji-board/EmojiBoardOpener.jsx | 8 +-------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/app/organisms/channel/ChannelViewContent.jsx b/src/app/organisms/channel/ChannelViewContent.jsx
index 9f75e080..ab8b9717 100644
--- a/src/app/organisms/channel/ChannelViewContent.jsx
+++ b/src/app/organisms/channel/ChannelViewContent.jsx
@@ -176,9 +176,10 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
 }
 
 function pickEmoji(e, roomId, eventId, roomTimeline) {
+  const boxInfo = e.target.getBoundingClientRect();
   openEmojiBoard({
-    x: e.detail ? e.clientX : '50%',
-    y: e.detail ? e.clientY : '50%',
+    x: boxInfo.x,
+    y: boxInfo.y,
     detail: e.detail,
   }, (emoji) => {
     toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
@@ -439,7 +440,7 @@ function ChannelViewContent({
                 iconSrc={EmojiAddIC}
                 onClick={(e) => pickEmoji(e, roomId, mEvent.getId(), roomTimeline)}
               >
-                Add reaciton
+                Add reaction
               </MenuItem>
               <MenuItem
                 iconSrc={ReplyArrowIC}
diff --git a/src/app/organisms/channel/ChannelViewInput.jsx b/src/app/organisms/channel/ChannelViewInput.jsx
index d22cd464..957c3802 100644
--- a/src/app/organisms/channel/ChannelViewInput.jsx
+++ b/src/app/organisms/channel/ChannelViewInput.jsx
@@ -300,10 +300,10 @@ function ChannelViewInput({
         <div ref={rightOptionsRef} className="channel-input__option-container">
           <IconButton
             onClick={(e) => {
+              const boxInfo = e.target.getBoundingClientRect();
               openEmojiBoard({
-                x: '10%',
-                y: 300,
-                isReverse: true,
+                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
+                y: boxInfo.y - 250,
                 detail: e.detail,
               }, addEmoji);
             }}
diff --git a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
index b2ecc0c4..b16a9e34 100644
--- a/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoardOpener.jsx
@@ -18,13 +18,7 @@ function EmojiBoardOpener() {
       return;
     }
 
-    const x = typeof cords.x === 'string' ? cords.x : `${cords.x}px`;
-    const y = typeof cords.y === 'string' ? cords.y : `${cords.y}px`;
-
-    openerRef.current.style.left = cords.isReverse ? 'unset' : x;
-    openerRef.current.style.top = cords.isReverse ? 'unset' : y;
-    openerRef.current.style.right = cords.isReverse ? x : 'unset';
-    openerRef.current.style.bottom = cords.isReverse ? y : 'unset';
+    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
     requestCallback = requestEmojiCallback;
     openerRef.current.click();
   }