fix(mobile): tap outside to dismiss mention popup

packages/app/ui/components/BareChatInput/index.tsx

@@ -292,6 +292,7 @@ function BareChatInput(
     handleMention,
     handleSelectMention,
     handleMentionEscape,
+    handleMentionSoftDismiss,
   } = useMentions({ chatId: groupId ?? channelId, roleOptions });
   const maxInputHeight = useKeyboardHeight(maxInputHeightBasic);
   const inputRef = useRef<TextInput>(null);
@@ -906,6 +907,7 @@ function BareChatInput(
       mentionOptions={validOptions}
       mentionRef={mentionRef}
       onSelectMention={onMentionSelect}
+      onDismissMentions={handleMentionSoftDismiss}
       showAttachmentButton={showAttachmentButton}
       isEditing={!!editingPost}
       cancelEditing={handleCancelEditing}

packages/app/ui/components/BareChatInput/useMentions.tsx

@@ -292,6 +292,14 @@ export const useMentions = ({
     setLastDismissedTriggerIndex(mentionStartIndex);
   };
 
+  // Light dismiss for gestures like tapping outside the popup. Unlike
+  // handleMentionEscape (which "poisons" the current trigger index so the
+  // popup doesn't reopen as the user keeps typing), this just hides the
+  // popup; the next keystroke re-evaluates the mention trigger normally.
+  const handleMentionSoftDismiss = () => {
+    setIsMentionModeActive(false);
+  };
+
   return {
     mentions,
     validOptions,
@@ -303,6 +311,7 @@ export const useMentions = ({
     isMentionModeActive,
     setIsMentionModeActive,
     handleMentionEscape,
+    handleMentionSoftDismiss,
     hasMentionCandidates,
   };
 };

packages/app/ui/components/MessageInput/InputMentionPopup.tsx

@@ -1,36 +1,128 @@
 import * as db from '@tloncorp/shared/db';
-import { PropsWithRef } from 'react';
+import { PropsWithRef, useEffect, useState } from 'react';
 import React from 'react';
-import { View, YStack } from 'tamagui';
+import { Keyboard, Platform, Pressable } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal, View, YStack } from 'tamagui';
 
 import { MentionOption } from '../BareChatInput/useMentions';
 import { useIsWindowNarrow } from '../Emoji';
 import MentionPopup, { MentionPopupRef } from '../MentionPopup';
 
+function useKeyboardHeight() {
+  // Read the keyboard state synchronously on mount so the popup positions
+  // correctly when the component mounts with the keyboard already visible
+  // (e.g. navigating between channels without dismissing the keyboard).
+  const [height, setHeight] = useState(() => Keyboard.metrics()?.height ?? 0);
+  useEffect(() => {
+    const showSub = Keyboard.addListener('keyboardDidShow', (e) => {
+      setHeight(e.endCoordinates.height);
+    });
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      setHeight(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  return height;
+}
+
 function InputMentionPopupInternal(
   {
     containerHeight,
+    inputBarHeight,
     isMentionModeActive,
     mentionText,
     options,
     onSelectMention,
+    onDismiss,
   }: PropsWithRef<{
     containerHeight: number;
+    // Measured height of the actual input bar, used to stop the mobile
+    // dismiss backdrop above a multi-line composer. Falls back to
+    // containerHeight (static) when unavailable.
+    inputBarHeight?: number;
     isMentionModeActive: boolean;
     mentionText?: string;
     options: MentionOption[];
     onSelectMention: (option: MentionOption) => void;
+    onDismiss?: () => void;
   }>,
   ref: MentionPopupRef
 ) {
   const isNarrow = useIsWindowNarrow();
-  return isMentionModeActive ? (
+  const insets = useSafeAreaInsets();
+  const keyboardHeight = useKeyboardHeight();
+  const isMobile = Platform.OS !== 'web';
+
+  if (!isMentionModeActive) return null;
+
+  // On mobile, render in a Portal so the tap-outside backdrop isn't clipped
+  // by ancestor View bounds (Android clipChildren defaults to true).
+  // MentionPopup itself returns null when options.length === 0, so the
+  // backdrop would otherwise catch taps with nothing visible — skip both.
+  if (isMobile && options.length > 0) {
+    // Android uses adjustResize (see AndroidManifest), so the root view
+    // already shrinks above the keyboard — a Portal's `bottom: 0` is the
+    // keyboard top. On iOS the root does not resize, so we add the
+    // keyboard height ourselves.
+    const effectiveBottomInset =
+      Platform.OS === 'ios' && keyboardHeight > 0
+        ? keyboardHeight
+        : insets.bottom;
+    const bottomOffset = effectiveBottomInset + containerHeight + 24;
+    // Backdrop stops just above the real composer (measured, or the static
+    // fallback) so taps inside a tall multi-line input still place the
+    // cursor instead of dismissing the popup.
+    const backdropBottom =
+      effectiveBottomInset + (inputBarHeight ?? containerHeight);
+
+    return (
+      <Portal>
+        {onDismiss ? (
+          <Pressable
+            onPress={onDismiss}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: backdropBottom,
+            }}
+          />
+        ) : null}
+        <View
+          position="absolute"
+          bottom={bottomOffset}
+          left={0}
+          right={0}
+          alignItems="center"
+          pointerEvents="box-none"
+        >
+          <View
+            width="90%"
+            maxWidth={isNarrow ? undefined : 500}
+            pointerEvents="box-none"
+          >
+            <MentionPopup
+              onPress={onSelectMention}
+              matchText={mentionText}
+              options={options}
+              ref={ref}
+            />
+          </View>
+        </View>
+      </Portal>
+    );
+  }
+
+  return (
     <YStack
       position="absolute"
       bottom={containerHeight + 24}
       zIndex={15}
-      // borderWidth={2}
-      // borderColor="orange"
       width="90%"
       maxWidth={isNarrow ? 'unset' : 500}
     >
@@ -43,7 +135,7 @@ function InputMentionPopupInternal(
         />
       </View>
     </YStack>
-  ) : null;
+  );
 }
 
 const InputMentionPopup = React.forwardRef(InputMentionPopupInternal);

packages/app/ui/components/MessageInput/MessageInputBase.tsx

@@ -4,8 +4,9 @@ import * as db from '@tloncorp/shared/db';
 import type * as domain from '@tloncorp/shared/domain';
 import { Button, FloatingActionButton, Icon } from '@tloncorp/ui';
 import { ImagePickerAsset } from 'expo-image-picker';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { PropsWithChildren } from 'react';
+import { LayoutChangeEvent } from 'react-native';
 import { SpaceTokens, styled } from 'tamagui';
 import {
   ThemeTokens,
@@ -91,6 +92,7 @@ export const MessageInputContainer = memo(
     mentionText,
     mentionOptions,
     onSelectMention,
+    onDismissMentions,
     isEditing = false,
     cancelEditing,
     onPressEdit,
@@ -111,6 +113,7 @@ export const MessageInputContainer = memo(
     mentionText?: string;
     mentionOptions: MentionOption[];
     onSelectMention: (option: MentionOption) => void;
+    onDismissMentions?: () => void;
     isEditing?: boolean;
     cancelEditing?: () => void;
     onPressEdit?: () => void;
@@ -124,6 +127,15 @@ export const MessageInputContainer = memo(
     const secondaryBackgroundColor = getVariableValue(
       theme.secondaryBackground
     );
+    // Track the real input-bar height so the mention backdrop (mobile
+    // tap-outside dismiss area) stops above the actual composer. The popup
+    // itself stays anchored to the static containerHeight so it remains
+    // accessible even if the user writes a huge multi-line draft.
+    const [measuredInputHeight, setMeasuredInputHeight] =
+      useState(containerHeight);
+    const handleInputLayout = (e: LayoutChangeEvent) => {
+      setMeasuredInputHeight(e.nativeEvent.layout.height);
+    };
 
     return (
       <YStack
@@ -134,10 +146,12 @@ export const MessageInputContainer = memo(
       >
         <InputMentionPopup
           containerHeight={containerHeight}
+          inputBarHeight={measuredInputHeight}
           isMentionModeActive={isMentionModeActive}
           mentionText={mentionText}
           options={mentionOptions}
           onSelectMention={onSelectMention}
+          onDismiss={onDismissMentions}
           ref={mentionRef}
         />
         {!frameless ? (
@@ -149,6 +163,7 @@ export const MessageInputContainer = memo(
             justifyContent="space-between"
             backgroundColor="$background"
             disableOptimization
+            onLayout={handleInputLayout}
           >
             {goBack ? (
               <View paddingBottom="$xs">
@@ -217,7 +232,11 @@ export const MessageInputContainer = memo(
         ) : (
           // Note: This **must** be an XStack (not a YStack, View, or Stack), otherwise the WebView in MessageInput will not
           // be interactive on Android.
-          <XStack width="100%" backgroundColor="$background">
+          <XStack
+            width="100%"
+            backgroundColor="$background"
+            onLayout={handleInputLayout}
+          >
             {children}
           </XStack>
         )}