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 }) define({ 'emoji-mart': Picker })
} }
this.set({ loaded: true }) this.set({ loaded: true })
requestAnimationFrame(() => { this.focusIfNecessary()
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()
}
}
})
} catch (error) { } catch (error) {
this.set({ error }) // should never happen, but you never know this.set({ error }) // should never happen, but you never know
} }
@ -137,8 +128,7 @@
emoji: 'sailboat', emoji: 'sailboat',
title: 'Emoji', title: 'Emoji',
include: categoriesSort, include: categoriesSort,
showPreview: true, showPreview: true
autoFocus: true
}), }),
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => ( perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => (
$isTinyMobileSize $isTinyMobileSize
@ -161,7 +151,9 @@
keywords: [emoji.shortcode], keywords: [emoji.shortcode],
imageUrl: $autoplayGifs ? emoji.url : emoji.static_url 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: { methods: {
show, show,
@ -170,6 +162,22 @@
let { realm } = this.get() let { realm } = this.get()
insertEmoji(realm, emoji) insertEmoji(realm, emoji)
this.close() 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 { resizeObservers } from './resizeObservers'
import { setupLoggedInObservers } from './setupLoggedInObservers' import { setupLoggedInObservers } from './setupLoggedInObservers'
import { logOutObservers } from './logOutObservers' import { logOutObservers } from './logOutObservers'
import { touchObservers } from './touchObservers'
export function observers (store) { export function observers (store) {
onlineObservers(store) onlineObservers(store)
navObservers(store) navObservers(store)
pageVisibilityObservers(store) pageVisibilityObservers(store)
resizeObservers(store) resizeObservers(store)
touchObservers(store)
logOutObservers(store) logOutObservers(store)
setupLoggedInObservers(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 })
}