fix: fix flash of searched content in autosuggest (#1188)

This commit is contained in:
Nolan Lawson 2019-05-06 08:34:20 -07:00 committed by GitHub
parent 75c3060912
commit cef76e6bba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 7 deletions

View file

@ -74,6 +74,7 @@
}
}).then(() => {
this.set({ shown: shouldBeShown })
this.store.setForCurrentAutosuggest({ autosuggestSelecting: false })
})
})
},
@ -81,6 +82,8 @@
observe,
once,
onClick (item) {
/* autosuggestSelecting prevents a flash of searched content */
this.store.setForCurrentAutosuggest({ autosuggestSelecting: true })
this.fire('autosuggestItemSelected')
selectAutosuggestItem(item)
}

View file

@ -127,7 +127,7 @@
stop('autosize.destroy()')
},
onBlur () {
scheduleIdleTask(() => {
requestAnimationFrame(() => {
this.store.setForCurrentAutosuggest({ composeFocused: false })
})
},
@ -177,14 +177,22 @@
if (!autosuggestShown) {
return false
}
let { realm } = this.get()
if (autosuggestType === 'account') {
/* no await */ clickSelectedAutosuggestionUsername(realm)
} else { // emoji
/* no await */ clickSelectedAutosuggestionEmoji(realm)
}
event.preventDefault()
event.stopPropagation()
const clickAutosuggestedItem = async () => {
let { realm } = this.get()
/* autosuggestSelecting prevents a flash of searched content */
this.store.setForCurrentAutosuggest({ autosuggestSelecting: true })
if (autosuggestType === 'account') {
await clickSelectedAutosuggestionUsername(realm)
} else { // emoji
await clickSelectedAutosuggestionEmoji(realm)
}
this.store.setForCurrentAutosuggest({ autosuggestSelecting: false })
}
/* no await */ clickAutosuggestedItem()
return true
},
incrementAutosuggestSelected (increment, event) {

View file

@ -1,3 +1,5 @@
import { get } from '../../_utils/lodash-lite'
export function autosuggestMixins (Store) {
Store.prototype.setForAutosuggest = function (instanceName, realm, obj) {
let valuesToSet = {}
@ -16,4 +18,9 @@ export function autosuggestMixins (Store) {
let { currentInstance, currentComposeRealm } = this.get()
this.setForAutosuggest(currentInstance, currentComposeRealm, obj)
}
Store.prototype.getForCurrentAutosuggest = function (key) {
let { currentInstance, currentComposeRealm } = this.get()
return get(this.get()[`autosuggestData_${key}`], [currentInstance, currentComposeRealm])
}
}

View file

@ -10,6 +10,19 @@ export function autosuggestObservers () {
if (!composeFocused || !autosuggestSearchText) {
return
}
/* autosuggestSelecting indicates that the user has pressed Enter or clicked on an item
and the results are being processed. Returning early avoids a flash of searched content.
We can also cancel any inflight XHRs here.
*/
let autosuggestSelecting = store.getForCurrentAutosuggest('autosuggestSelecting')
if (autosuggestSelecting) {
if (lastSearch) {
lastSearch.cancel()
lastSearch = null
}
return
}
let autosuggestType = autosuggestSearchText.startsWith('@') ? 'account' : 'emoji'
if (lastSearch) {