diff --git a/src/components/common/helpers/renderText.tsx b/src/components/common/helpers/renderText.tsx
index e99a41088..68cd3ba21 100644
--- a/src/components/common/helpers/renderText.tsx
+++ b/src/components/common/helpers/renderText.tsx
@@ -5,6 +5,7 @@ import { RE_LINK_TEMPLATE, RE_MENTION_TEMPLATE } from '../../../config';
 import { IS_EMOJI_SUPPORTED } from '../../../util/environment';
 import { fixNonStandardEmoji, nativeToUnified } from '../../../util/emoji';
 import buildClassName from '../../../util/buildClassName';
+import { compact } from '../../../util/iteratees';
 
 import MentionLink from '../../middle/message/MentionLink';
 import SafeLink from '../SafeLink';
@@ -26,7 +27,7 @@ export default function renderText(
     return [part];
   }
 
-  return filters.reduce((text, filter) => {
+  return compact(filters.reduce((text, filter) => {
     switch (filter) {
       case 'escape_html':
         return escapeHtml(text);
@@ -63,7 +64,7 @@ export default function renderText(
     }
 
     return text;
-  }, [part] as TextPart[]);
+  }, [part] as TextPart[]));
 }
 
 function escapeHtml(textParts: TextPart[]): TextPart[] {
diff --git a/src/components/middle/composer/hooks/useEmojiTooltip.ts b/src/components/middle/composer/hooks/useEmojiTooltip.ts
index 71b77a555..90089dfeb 100644
--- a/src/components/middle/composer/hooks/useEmojiTooltip.ts
+++ b/src/components/middle/composer/hooks/useEmojiTooltip.ts
@@ -14,6 +14,7 @@ import {
 } from '../../../../util/iteratees';
 import memoized from '../../../../util/memoized';
 import useFlag from '../../../../hooks/useFlag';
+import renderText from '../../../common/helpers/renderText';
 
 interface Library {
   keywords: string[];
@@ -115,10 +116,10 @@ export default function useEmojiTooltip(
     const currentHtml = htmlRef.current;
     const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined);
     if (atIndex !== -1) {
-      onUpdateHtml(`${currentHtml.substr(0, atIndex)}${textEmoji}`);
+      onUpdateHtml(`${currentHtml.substr(0, atIndex)}${renderText(textEmoji, ['emoji_html'])}`);
       const messageInput = document.getElementById(inputId)!;
       requestAnimationFrame(() => {
-        focusEditableElement(messageInput, true);
+        focusEditableElement(messageInput, true, true);
       });
     }
 
diff --git a/src/util/focusEditableElement.ts b/src/util/focusEditableElement.ts
index 0ac2266c3..8f88d0acf 100644
--- a/src/util/focusEditableElement.ts
+++ b/src/util/focusEditableElement.ts
@@ -1,6 +1,6 @@
 import { IS_TOUCH_ENV } from './environment';
 
-export default function focusEditableElement(element: HTMLElement, force?: boolean) {
+export default function focusEditableElement(element: HTMLElement, force?: boolean, forcePlaceCaretAtEnd?: boolean) {
   if (!force && element === document.activeElement) {
     return;
   }
@@ -9,12 +9,12 @@ export default function focusEditableElement(element: HTMLElement, force?: boole
   const range = document.createRange();
   const lastChild = element.lastChild || element;
 
-  if (!IS_TOUCH_ENV && (!lastChild || !lastChild.nodeValue)) {
+  if (!IS_TOUCH_ENV && !forcePlaceCaretAtEnd && (!lastChild || !lastChild.nodeValue)) {
     element.focus();
     return;
   }
 
-  range.selectNodeContents(lastChild);
+  range.selectNodeContents(forcePlaceCaretAtEnd ? element : lastChild);
   // `false` means collapse to the end rather than the start
   range.collapse(false);
   selection.removeAllRanges();