From 85782aeb930b63995d83157f581f66e564743626 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 23 May 2024 19:45:50 -0700
Subject: [PATCH] =?UTF-8?q?[=F0=9F=90=B4]=20Don't=20submit=20the=20message?=
 =?UTF-8?q?=20on=20return=20press=20when=20on=20a=20phone=20(web=20input)?=
 =?UTF-8?q?=20(#4203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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          |  3 +--
 src/lib/browser.native.ts                              |  1 +
 src/lib/browser.ts                                     |  3 ++-
 src/screens/Messages/Conversation/MessageInput.web.tsx | 10 +++++++---
 4 files changed, 11 insertions(+), 6 deletions(-)

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