From 581a0fcd000684e8127d2b3a8d0ad5ec2e9ad267 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 20 Apr 2018 06:26:36 -0700
Subject: [PATCH] fix multiple compose autosuggest dropdowns (#188)

* fix multiple compose autosuggest dropdowns

Fixes #170

* fix failing test

* remove console.log
---
 .../_components/compose/ComposeAutosuggest.html   |  5 +++--
 routes/_components/compose/ComposeInput.html      |  5 +++--
 tests/spec/018-compose-autosuggest.js             | 15 ++++++++++++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/routes/_components/compose/ComposeAutosuggest.html b/routes/_components/compose/ComposeAutosuggest.html
index 6041e950..78dc03db 100644
--- a/routes/_components/compose/ComposeAutosuggest.html
+++ b/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)
       }
diff --git a/routes/_components/compose/ComposeInput.html b/routes/_components/compose/ComposeInput.html
index b6b359c8..2db927ab 100644
--- a/routes/_components/compose/ComposeInput.html
+++ b/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})
diff --git a/tests/spec/018-compose-autosuggest.js b/tests/spec/018-compose-autosuggest.js
index 8e7a1f07..a4d309a4 100644
--- a/tests/spec/018-compose-autosuggest.js
+++ b/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()
+})