diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js
--- a/web/chat/message-tooltip.react.js
+++ b/web/chat/message-tooltip.react.js
@@ -50,17 +50,36 @@
 
   const [activeTooltipLabel, setActiveTooltipLabel] = React.useState<?string>();
 
-  const { renderEmojiKeyboard } = useTooltipContext();
-
-  const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
-
-  const emojiKeyboardRef = React.useRef();
-
-  React.useEffect(() => {
-    if (emojiKeyboardRef.current) {
-      setEmojiKeyboardNode(emojiKeyboardRef.current);
-    }
-  }, [renderEmojiKeyboard]);
+  const { shouldRenderEmojiKeyboard } = useTooltipContext();
+
+  // const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null);
+  const [positionState, setPositionState] = React.useState(null);
+
+  // const emojiKeyboardRef = React.useRef();
+
+  // React.useEffect(() => {
+  //   if (emojiKeyboardRef.current) {
+  //     setEmojiKeyboardNode(emojiKeyboardRef.current);
+  //   }
+  // }, [shouldRenderEmojiKeyboard]);
+
+  const emojiKeyboardRef = React.useCallback(
+    node => {
+      if (node) {
+        const { width, height } = node.getBoundingClientRect();
+        console.log(node.getBoundingClientRect());
+        if (width > 0 && height > 0) {
+          const emojiKeyboardPosition = getEmojiKeyboardPosition(
+            node,
+            tooltipPositionStyle,
+            tooltipSize,
+          );
+          setPositionState(emojiKeyboardPosition);
+        }
+      }
+    },
+    [tooltipPositionStyle, tooltipSize],
+  );
 
   const messageActionButtonsContainerClassName = classNames(
     css.messageActionContainer,
@@ -134,26 +153,26 @@
     );
   }, [messageTimestamp, messageTooltipLabelStyle]);
 
-  const emojiKeyboardPosition = React.useMemo(
-    () =>
-      getEmojiKeyboardPosition(
-        emojiKeyboardNode,
-        tooltipPositionStyle,
-        tooltipSize,
-      ),
-    [emojiKeyboardNode, tooltipPositionStyle, tooltipSize],
-  );
+  // const emojiKeyboardPosition = React.useMemo(
+  //   () =>
+  //     getEmojiKeyboardPosition(
+  //       emojiKeyboardNode,
+  //       tooltipPositionStyle,
+  //       tooltipSize,
+  //     ),
+  //   [emojiKeyboardNode, tooltipPositionStyle, tooltipSize],
+  // );
 
   const emojiKeyboardPositionStyle = React.useMemo(() => {
-    if (!emojiKeyboardPosition) {
+    if (!positionState) {
       return null;
     }
 
     return {
-      bottom: emojiKeyboardPosition.bottom,
-      left: emojiKeyboardPosition.left,
+      bottom: positionState.bottom,
+      left: positionState.left,
     };
-  }, [emojiKeyboardPosition]);
+  }, [positionState]);
 
   const nextLocalID = useSelector(state => state.nextLocalID);
   const localID = `${localIDPrefix}${nextLocalID}`;
@@ -175,20 +194,32 @@
   );
 
   const emojiKeyboard = React.useMemo(() => {
-    if (!renderEmojiKeyboard) {
-      return null;
-    }
+    // if (!shouldRenderEmojiKeyboard) {
+    //   return null;
+    // }
 
     return (
       <div
-        ref={emojiKeyboardRef}
+        // ref={emojiKeyboardRef}
         style={emojiKeyboardPositionStyle}
         className={css.emojiKeyboard}
       >
-        <Picker data={data} onEmojiSelect={onEmojiSelect} />
+        {shouldRenderEmojiKeyboard && (
+          <Picker
+            ref={emojiKeyboardRef}
+            data={data}
+            onEmojiSelect={onEmojiSelect}
+            // onClickOu
+          />
+        )}
       </div>
     );
-  }, [emojiKeyboardPositionStyle, onEmojiSelect, renderEmojiKeyboard]);
+  }, [
+    emojiKeyboardPositionStyle,
+    emojiKeyboardRef,
+    onEmojiSelect,
+    shouldRenderEmojiKeyboard,
+  ]);
 
   const messageTooltipContainerStyle = React.useMemo(() => tooltipStyle, []);
 
diff --git a/web/chat/reaction-message-utils.js b/web/chat/reaction-message-utils.js
--- a/web/chat/reaction-message-utils.js
+++ b/web/chat/reaction-message-utils.js
@@ -134,6 +134,7 @@
 
   if (emojiKeyboard) {
     const { width, height } = emojiKeyboard.getBoundingClientRect();
+    console.log(emojiKeyboard.getBoundingClientRect());
     emojiKeyboardWidth = width;
     emojiKeyboardHeight = height;
   }
diff --git a/web/chat/tooltip-provider.js b/web/chat/tooltip-provider.js
--- a/web/chat/tooltip-provider.js
+++ b/web/chat/tooltip-provider.js
@@ -26,8 +26,8 @@
 type TooltipContextType = {
   +renderTooltip: (params: RenderTooltipParams) => RenderTooltipResult,
   +clearTooltip: () => mixed,
-  +renderEmojiKeyboard: boolean,
-  +setRenderEmojiKeyboard: SetState<boolean>,
+  +shouldRenderEmojiKeyboard: boolean,
+  +setShouldRenderEmojiKeyboard: SetState<boolean>,
 };
 
 const TooltipContext: React.Context<TooltipContextType> =
@@ -38,8 +38,8 @@
       updateTooltip: () => {},
     }),
     clearTooltip: () => {},
-    renderEmojiKeyboard: false,
-    setRenderEmojiKeyboard: () => {},
+    shouldRenderEmojiKeyboard: false,
+    setShouldRenderEmojiKeyboard: () => {},
   });
 
 type Props = {
@@ -53,7 +53,7 @@
   const [tooltipNode, setTooltipNode] = React.useState<React.Node>(null);
   const [tooltipPosition, setTooltipPosition] =
     React.useState<?TooltipPositionStyle>(null);
-  const [renderEmojiKeyboard, setRenderEmojiKeyboard] =
+  const [shouldRenderEmojiKeyboard, setShouldRenderEmojiKeyboard] =
     React.useState<boolean>(false);
 
   const clearTooltip = React.useCallback((tooltipToClose: symbol) => {
@@ -63,7 +63,7 @@
     tooltipCancelTimer.current = null;
     setTooltipNode(null);
     setTooltipPosition(null);
-    setRenderEmojiKeyboard(false);
+    setShouldRenderEmojiKeyboard(false);
     tooltipSymbol.current = null;
   }, []);
 
@@ -156,10 +156,10 @@
     () => ({
       renderTooltip,
       clearTooltip: clearCurrentTooltip,
-      renderEmojiKeyboard,
-      setRenderEmojiKeyboard,
+      shouldRenderEmojiKeyboard,
+      setShouldRenderEmojiKeyboard,
     }),
-    [renderTooltip, clearCurrentTooltip, renderEmojiKeyboard],
+    [renderTooltip, clearCurrentTooltip, shouldRenderEmojiKeyboard],
   );
 
   return (
diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js
--- a/web/utils/tooltip-utils.js
+++ b/web/utils/tooltip-utils.js
@@ -452,7 +452,7 @@
 ): ?MessageTooltipAction {
   const { messageInfo } = item;
 
-  const { setRenderEmojiKeyboard } = useTooltipContext();
+  const { setShouldRenderEmojiKeyboard } = useTooltipContext();
 
   const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
     threadInfo,
@@ -467,10 +467,10 @@
     const buttonContent = <CommIcon icon="emote-smile-filled" size={18} />;
 
     const onClickReact = () => {
-      if (!setRenderEmojiKeyboard) {
+      if (!setShouldRenderEmojiKeyboard) {
         return;
       }
-      setRenderEmojiKeyboard(true);
+      setShouldRenderEmojiKeyboard(true);
     };
 
     return {
@@ -478,7 +478,7 @@
       onClick: onClickReact,
       label: 'React',
     };
-  }, [canCreateReactionFromMessage, setRenderEmojiKeyboard]);
+  }, [canCreateReactionFromMessage, setShouldRenderEmojiKeyboard]);
 }
 
 function useMessageTooltipActions(