From 581a0fcd000684e8127d2b3a8d0ad5ec2e9ad267 Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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() +})