diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx index 75eba659..024867b1 100644 --- a/src/components/ProfileHoverCard/index.web.tsx +++ b/src/components/ProfileHoverCard/index.web.tsx @@ -11,6 +11,7 @@ import {sanitizeHandle} from '#/lib/strings/handles' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' +import {isTouchDevice} from 'lib/browser' import {useProfileShadow} from 'state/cache/profile-shadow' import {formatCount} from '#/view/com/util/numeric/format' import {UserAvatar} from '#/view/com/util/UserAvatar' @@ -43,8 +44,6 @@ const floatingMiddlewares = [ }), ] -const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 1 - export function ProfileHoverCard(props: ProfileHoverCardProps) { if (props.disable || isTouchDevice) { return props.children diff --git a/src/lib/browser.native.ts b/src/lib/browser.native.ts index 3ac238b9..fb9be56f 100644 --- a/src/lib/browser.native.ts +++ b/src/lib/browser.native.ts @@ -1,2 +1,3 @@ export const isSafari = false export const isFirefox = false +export const isTouchDevice = true diff --git a/src/lib/browser.ts b/src/lib/browser.ts index d5ecb4e8..d178a9a6 100644 --- a/src/lib/browser.ts +++ b/src/lib/browser.ts @@ -2,5 +2,6 @@ export const isSafari = /^((?!chrome|android).)*safari/i.test( navigator.userAgent, ) - export const isFirefox = /firefox|fxios/i.test(navigator.userAgent) +export const isTouchDevice = + 'ontouchstart' in window || navigator.maxTouchPoints > 1 diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx index ab3d227b..5d8d568f 100644 --- a/src/screens/Messages/Conversation/MessageInput.web.tsx +++ b/src/screens/Messages/Conversation/MessageInput.web.tsx @@ -10,7 +10,8 @@ import { useMessageDraft, useSaveMessageDraft, } from '#/state/messages/message-drafts' -import {isSafari} from 'lib/browser' +import {isSafari, isTouchDevice} from 'lib/browser' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' import {useSharedInputStyles} from '#/components/forms/TextField' @@ -21,6 +22,7 @@ export function MessageInput({ }: { onSendMessage: (message: string) => void }) { + const {isTabletOrDesktop} = useWebMediaQueries() const {_} = useLingui() const t = useTheme() const {getDraft, clearDraft} = useMessageDraft() @@ -74,7 +76,7 @@ export function MessageInput({ onSubmit() } }, - [onSubmit, isComposing], + [onSubmit], ) const onChange = React.useCallback( @@ -134,7 +136,9 @@ export function MessageInput({ }} onHeightChange={height => setTextAreaHeight(height)} onChange={onChange} - onKeyDown={onKeyDown} + // On mobile web phones, we want to keep the same behavior as the native app. Do not submit the message + // in these cases. + onKeyDown={isTouchDevice && isTabletOrDesktop ? undefined : onKeyDown} />