[🐴] Don't submit the message on return press when on a phone (web input) (#4203)

move this to the `onKeyDown` prop

Revert "do the same for tablets"

This reverts commit 47c709e2734f2acf34f89dd5aca42a75a2b56270.

do the same for tablets

don't submit message if the device is a phone on web

move `onTouchStart` to `browser.ts` globals

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

src/lib/browser.native.ts

@@ -1,2 +1,3 @@
 export const isSafari = false
 export const isFirefox = false
+export const isTouchDevice = true

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

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}
         />
         <Pressable
           accessibilityRole="button"