diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html index 4c26781..cc46d29 100644 --- a/src/routes/_components/dialog/components/EmojiDialog.html +++ b/src/routes/_components/dialog/components/EmojiDialog.html @@ -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() + } + } + }) } } } diff --git a/src/routes/_store/observers/observers.js b/src/routes/_store/observers/observers.js index 4899005..fe278cc 100644 --- a/src/routes/_store/observers/observers.js +++ b/src/routes/_store/observers/observers.js @@ -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) } diff --git a/src/routes/_store/observers/touchObservers.js b/src/routes/_store/observers/touchObservers.js new file mode 100644 index 0000000..80e4bdb --- /dev/null +++ b/src/routes/_store/observers/touchObservers.js @@ -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 }) +}