Fix emoji autocomplete overlapping actual text

position dropdown below text
2026-02-17 14:18:34 -06:00
parent ca92208c28
commit cfaf317b35
2 changed files with 13 additions and 10 deletions
@@ -70,17 +70,12 @@ export default {
  },
  computed: {
    autocompleteStyle () {
-      function heightToUse (textBox, topCoords) {
-        const textBoxHeight = textBox.clientHeight;
-        return topCoords < textBoxHeight ? topCoords + 30 : textBoxHeight + 10;
-      }
+      const top = this.textbox.offsetTop + this.textbox.offsetHeight + 2;
      return {
-        top: `${heightToUse(this.textbox, this.coords.TOP)}px`,
-        left: `${this.coords.LEFT + 30}px`,
-        marginLeft: '-28px',
-        marginTop: '28px',
+        top: `${top}px`,
+        left: `${this.textbox.offsetLeft}px`,
        position: 'absolute',
-        minWidth: '100px',
+        minWidth: '150px',
        zIndex: 100,
        backgroundColor: 'white',
      };
@@ -982,8 +982,16 @@ export default defineComponent({
      }
    },
  },
+  watch: {
+    shouldShowInputPanel (val) {
+      if (val) {
+        this.$nextTick(() => {
+          this.textbox = this.$refs.textarea;
+        });
+      }
+    },
+  },
  async mounted () {
-    this.textbox = this.$refs.textarea;
    this.$store.dispatch('common:setTitle', {
      section: this.$t('messages'),
    });