diff --git a/routes/_components/compose/ComposeAutosuggest.html b/routes/_components/compose/ComposeAutosuggest.html
index 7d209b32..30b0dffa 100644
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/routes/_components/compose/ComposeAutosuggest.html
@@ -17,7 +17,7 @@
   }
   .compose-autosuggest.shown {
     pointer-events: auto;
-    opacity: 1
+    opacity: 1;
   }
 
   @media (max-width: 479px) {
diff --git a/routes/_components/compose/ComposeToolbar.html b/routes/_components/compose/ComposeToolbar.html
index 49af8a96..c555ce54 100644
--- a/routes/_components/compose/ComposeToolbar.html
+++ b/routes/_components/compose/ComposeToolbar.html
@@ -30,7 +30,7 @@
          style="display: none;"
          type="file"
          accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
-  <div class="compose-autosuggest-wrapper">
+  <div class="compose-autosuggest-wrapper {{composeAutosuggestionShown ? '' : 'not-shown'}} {{realm === 'dialog' ? 'is-dialog' : ''}}">
     <ComposeAutosuggest :realm :text />
   </div>
 </div>
@@ -50,6 +50,12 @@
     top: 0;
     z-index: 7000;
   }
+  .compose-autosuggest-wrapper.is-dialog {
+    z-index: 11000;
+  }
+  .compose-autosuggest-wrapper.not-shown {
+    pointer-events: none;
+  }
 </style>
 <script>
   import IconButton from '../IconButton.html'
@@ -76,6 +82,9 @@
       ComposeAutosuggest
     },
     store: () => store,
+    computed: {
+      composeAutosuggestionShown: ($composeAutosuggestionShown) => $composeAutosuggestionShown
+    },
     methods: {
       async onEmojiClick() {
         let dialogs = await importDialogs()