mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
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:
@@ -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}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user