diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index d32e19bf..3deeb6c8 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -175,13 +175,13 @@ const EmojiInput = { showSuggestions: function (newValue) { this.$emit('shown', newValue) }, - textAtCaret: async function (textAtCaret) { - const firstchar = textAtCaret.charAt(0) + textAtCaret: async function (newWord) { + const firstchar = newWord.charAt(0) this.suggestions = [] - if (textAtCaret === firstchar) return - const matchedSuggestions = await this.suggest(textAtCaret) - // Async, cancel if textAtCaret has been updated while waiting - if (this.textAtCaret !== textAtCaret) return + if (newWord === firstchar) return + const matchedSuggestions = await this.suggest(newWord) + // Async: cancel if textAtCaret has changed during wait + if (this.textAtCaret !== newWord) return if (matchedSuggestions.length <= 0) return this.suggestions = take(matchedSuggestions, 5) .map(({ imageUrl, ...rest }) => ({ diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 0d268f85..14a2b41e 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -57,6 +57,8 @@ export const suggestEmoji = emojis => input => { } export const suggestUsers = ({ dispatch, state }) => { + // Keep some persistent values in closure, most importantly for the + // custom debounce to work. Lodash debounce does not return a promise. let suggestions = [] let previousQuery = '' let timeout = null @@ -66,7 +68,6 @@ export const suggestUsers = ({ dispatch, state }) => { const debounceUserSearch = (query) => { cancelUserSearch && cancelUserSearch() return new Promise((resolve, reject) => { - clearTimeout(timeout) timeout = setTimeout(() => { userSearch(query).then(resolve).catch(reject) }, 300) @@ -95,11 +96,6 @@ export const suggestUsers = ({ dispatch, state }) => { user => user.screen_name.toLowerCase().startsWith(noPrefix) || user.name.toLowerCase().startsWith(noPrefix) - - /* taking only 20 results so that sorting is a bit cheaper, we display - * only 5 anyway. could be inaccurate, but we ideally we should query - * backend anyway - */ ).slice(0, 20).sort((a, b) => { let aScore = 0 let bScore = 0