fix(picker): only focus picker search on desktop (#843)

* fix(picker): only focus picker search on desktop

* detect using touch detection instead
This commit is contained in:
Nolan Lawson 2018-12-18 20:01:53 -08:00 committed by GitHub
parent 7596d905ab
commit d047a265a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 13 deletions

View file

@ -99,16 +99,7 @@
define({ 'emoji-mart': Picker })
}
this.set({ loaded: true })
requestAnimationFrame(() => {
let container = this.refs.container
if (container) {
let searchInput = container.querySelector('emoji-mart .emoji-mart-search input')
if (searchInput) {
// do this manually because emoji-mart's built in autofocus doesn't work consistently
searchInput.focus()
}
}
})
this.focusIfNecessary()
} catch (error) {
this.set({ error }) // should never happen, but you never know
}
@ -137,8 +128,7 @@
emoji: 'sailboat',
title: 'Emoji',
include: categoriesSort,
showPreview: true,
autoFocus: true
showPreview: true
}),
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => (
$isTinyMobileSize
@ -161,7 +151,9 @@
keywords: [emoji.shortcode],
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url
}))
}
},
// it's jarring on mobile if the emoji picker automatically pops open the keyboard
autoFocus: ({ $isUserTouching }) => !$isUserTouching
},
methods: {
show,
@ -170,6 +162,22 @@
let { realm } = this.get()
insertEmoji(realm, emoji)
this.close()
},
focusIfNecessary () {
let { autoFocus } = this.get()
if (!autoFocus) {
return
}
requestAnimationFrame(() => {
let container = this.refs.container
if (container) {
let searchInput = container.querySelector('emoji-mart .emoji-mart-search input')
if (searchInput) {
// do this manually because emoji-mart's built in autofocus doesn't work consistently
searchInput.focus()
}
}
})
}
}
}

View file

@ -4,12 +4,14 @@ import { pageVisibilityObservers } from './pageVisibilityObservers'
import { resizeObservers } from './resizeObservers'
import { setupLoggedInObservers } from './setupLoggedInObservers'
import { logOutObservers } from './logOutObservers'
import { touchObservers } from './touchObservers'
export function observers (store) {
onlineObservers(store)
navObservers(store)
pageVisibilityObservers(store)
resizeObservers(store)
touchObservers(store)
logOutObservers(store)
setupLoggedInObservers(store)
}

View file

@ -0,0 +1,12 @@
export function touchObservers (store) {
if (!process.browser) {
return
}
let onTouch = () => {
store.set({ isUserTouching: true })
window.removeEventListener('touchstart', onTouch)
}
window.addEventListener('touchstart', onTouch, { passive: true })
}