feat(web): add auto-focus to composer input on desktop devices only

Adds touch device detection via media query (pointer: coarse) to prevent
triggering virtual keyboard on mobile. Input auto-focus is now conditional
on desktop environments where it improves keyboard-based interactions.
This commit is contained in:
weishu
2025-12-22 09:46:03 +08:00
parent dbcbc93ad0
commit aacab0be51
2 changed files with 11 additions and 1 deletions
@@ -100,7 +100,7 @@ export function HappyComposer(props: {
})
}, [composerText])
const { haptic: platformHaptic } = usePlatform()
const { haptic: platformHaptic, isTouch } = usePlatform()
const activeWord = useActiveWord(inputState.text, inputState.selection, autocompletePrefixes)
const [suggestions, selectedIndex, moveUp, moveDown, clearSuggestions] = useActiveSuggestions(
activeWord,
@@ -433,6 +433,7 @@ export function HappyComposer(props: {
<div className="flex items-center px-4 py-3">
<ComposerPrimitive.Input
ref={textareaRef}
autoFocus={!controlsDisabled && !isTouch}
placeholder="Type a message..."
disabled={controlsDisabled}
maxRows={5}
+9
View File
@@ -16,6 +16,8 @@ export type PlatformHaptic = {
export type Platform = {
/** Whether running in Telegram Mini App */
isTelegram: boolean
/** Whether using a touch device (coarse pointer) */
isTouch: boolean
/** Haptic feedback (falls back to Vibration API on browser) */
haptic: PlatformHaptic
}
@@ -67,17 +69,24 @@ const haptic: PlatformHaptic = {
export function usePlatform(): Platform {
const isTelegram = useMemo(() => isTelegramApp(), [])
const isTouch = useMemo(
() => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,
[]
)
return {
isTelegram,
isTouch,
haptic
}
}
// Non-hook version for use outside React components
export function getPlatform(): Platform {
const isTouch = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches
return {
isTelegram: isTelegramApp(),
isTouch,
haptic
}
}