fix multiple compose autosuggest dropdowns (#188)

* fix multiple compose autosuggest dropdowns

Fixes #170

* fix failing test

* remove console.log

routes/_components/compose/ComposeAutosuggest.html

@@ -134,6 +134,7 @@
     computed: {
       composeSelectionStart: ($composeSelectionStart) => $composeSelectionStart,
       composeFocused: ($composeFocused) => $composeFocused,
+      thisComposeFocused: (composeFocusedDeferred, realm) => composeFocusedDeferred === realm,
       searchResults: ($composeAutosuggestionSearchResults) => $composeAutosuggestionSearchResults || [],
       type: ($composeAutosuggestionType) => $composeAutosuggestionType || 'account',
       selected: ($composeAutosuggestionSelected) => $composeAutosuggestionSelected || 0,
@@ -147,8 +148,8 @@
         let match = textUpToCursor.match(ACCOUNT_SEARCH_REGEX) || textUpToCursor.match(EMOJI_SEARCH_REGEX)
         return match && match[1]
       },
-      shown: (composeFocusedDeferred, searchText, searchResults) => {
-        return !!(composeFocusedDeferred &&
+      shown: (thisComposeFocused, searchText, searchResults) => {
+        return !!(thisComposeFocused &&
           searchText &&
           searchResults.length)
       }

routes/_components/compose/ComposeInput.html

@@ -93,10 +93,11 @@
         stop('autosize.destroy()')
       },
       onBlur () {
-        this.store.set({composeFocused: false})
+        this.store.set({composeFocused: null})
       },
       onFocus () {
-        this.store.set({composeFocused: true})
+        let { realm } = this.get()
+        this.store.set({composeFocused: realm})
       },
       onSelectionChange (selectionStart) {
         this.store.set({composeSelectionStart: selectionStart})

tests/spec/018-compose-autosuggest.js

@@ -1,6 +1,7 @@
 import {
-  composeInput, getNthAutosuggestionResult
+  composeInput, getNthAutosuggestionResult, getNthComposeReplyInput, getNthReplyButton, getNthStatus
 } from '../utils'
+import { Selector as $ } from 'testcafe'
 import { foobarRole } from '../roles'
 
 fixture`018-compose-autosuggest.js`
@@ -80,3 +81,15 @@ test('autosuggest handles works with regular emoji - clicking', async t => {
     .click(getNthAutosuggestionResult(1))
     .expect(composeInput.value).eql('\ud83c\udf4d @quux ')
 })
+
+test('autosuggest only shows for one input', async t => {
+  await t.useRole(foobarRole)
+    .hover(composeInput)
+    .typeText(composeInput, '@quu')
+    .hover(getNthStatus(0))
+    .click(getNthReplyButton(0))
+    .selectText(getNthComposeReplyInput(0))
+    .pressKey('delete')
+    .typeText(getNthComposeReplyInput(0), 'uu')
+    .expect($('.compose-autosuggest.shown').exists).notOk()
+})