diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue index f9cae13ed..310112ae4 100644 --- a/src/components/EmojiPicker.vue +++ b/src/components/EmojiPicker.vue @@ -15,7 +15,7 @@ import { useTheme } from '@/hooks/useTheme' import axios from 'axios' import { defineComponent, onMounted, PropType, ref } from 'vue' import { Picker } from 'emoji-mart' -import { isMobile } from '@/lib/display-mobile' +import { useIsMobile } from '@/hooks/useIsMobile' const className = 'emoji-picker' const classes = { @@ -34,6 +34,7 @@ export default defineComponent({ }, emits: ['emoji:select'], setup(props, { emit }) { + const isMobile = useIsMobile() const { isDarkTheme } = useTheme() const container = ref() const picker = ref() @@ -43,7 +44,7 @@ export default defineComponent({ picker.value = new Picker({ data, - autoFocus: !isMobile(), // disable autofocus on mobile devices + autoFocus: !isMobile.value, // disable autofocus on mobile devices dynamicWidth: true, navPosition: 'none', previewPosition: 'none', diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts new file mode 100644 index 000000000..96a37938e --- /dev/null +++ b/src/hooks/useIsMobile.ts @@ -0,0 +1,30 @@ +import { detect } from 'detect-browser' +import { ref, onMounted, onUnmounted } from 'vue' + +export function useIsMobile() { + const isMobile = ref(false) + + const checkIsMobile = () => { + const browser = detect() + const isMobileDevice = + browser && browser.os + ? ['android os', 'ios', 'blackberry os'].includes(browser.os.toLowerCase()) + : false + return isMobileDevice || window.innerWidth < 450 + } + + const handleResize = () => { + isMobile.value = checkIsMobile() + } + + onMounted(() => { + isMobile.value = checkIsMobile() + window.addEventListener('resize', handleResize) + }) + + onUnmounted(() => { + window.removeEventListener('resize', handleResize) + }) + + return isMobile +}