Fix alt text - allow keyboard dismiss to be handled by scrollviews

src/components/Dialog/index.tsx

@@ -1,9 +1,8 @@
 import React, {useImperativeHandle} from 'react'
 import {
-  Dimensions,
-  Keyboard,
   Pressable,
   StyleProp,
+  useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native'
@@ -96,6 +95,7 @@ export function Outer({
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
+  const {height: windowHeight} = useWindowDimensions()
 
   /*
    * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
@@ -179,8 +179,7 @@ export function Outer({
             // Android
             importantForAccessibility="yes"
             style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
+            testID={testID}>
             <BottomSheet
               enableDynamicSizing={!hasSnapPoints}
               enablePanDownToClose
@@ -206,7 +205,7 @@ export function Outer({
                     {
                       borderTopLeftRadius: 40,
                       borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
+                      height: windowHeight * 2,
                     },
                   ]}
                 />
@@ -243,11 +242,20 @@ export function Inner({children, style}: DialogInnerProps) {
 export const ScrollableInner = React.forwardRef<
   BottomSheetScrollViewMethods,
   DialogInnerProps
->(function ScrollableInner({children, style}, ref) {
+>(function ScrollableInner(
+  {
+    children,
+    style,
+    keyboardShouldPersistTaps = 'handled',
+    keyboardDismissMode = 'on-drag',
+  },
+  ref,
+) {
   const insets = useSafeAreaInsets()
   return (
     <BottomSheetScrollView
-      keyboardShouldPersistTaps="handled"
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      keyboardDismissMode={keyboardDismissMode}
       style={[
         a.flex_1, // main diff is this
         a.p_xl,
@@ -276,6 +284,7 @@ export const InnerFlatList = React.forwardRef<
   return (
     <BottomSheetFlatList
       keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="on-drag"
       contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
       ListFooterComponent={
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />

src/components/Dialog/types.ts

@@ -66,10 +66,12 @@ export type DialogInnerProps =
       accessibilityLabelledBy: A11yProps['aria-labelledby']
       accessibilityDescribedBy: string
       keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
+      keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps']
     }>
   | DialogInnerPropsBase<{
       label: string
       accessibilityLabelledBy?: undefined
       accessibilityDescribedBy?: undefined
       keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
+      keyboardShouldPersistTaps?: ScrollViewProps['keyboardShouldPersistTaps']
     }>

src/components/dialogs/GifSelect.tsx

@@ -31,12 +31,12 @@ import {GifPreview} from './GifSelect.shared'
 
 export function GifSelectDialog({
   controlRef,
-  onClose,
   onSelectGif: onSelectGifProp,
+  onClose,
 }: {
   controlRef: React.RefObject<{open: () => void}>
-  onClose: () => void
   onSelectGif: (gif: Gif) => void
+  onClose?: () => void
 }) {
   const control = Dialog.useDialogControl()
 

src/view/com/composer/Composer.tsx

@@ -91,9 +91,9 @@ import {ComposerOpts} from '#/state/shell/composer'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {ComposerReplyTo} from '#/view/com/composer/ComposerReplyTo'
 import {ExternalEmbed} from '#/view/com/composer/ExternalEmbed'
-import {GifAltText} from '#/view/com/composer/GifAltText'
 import {LabelsBtn} from '#/view/com/composer/labels/LabelsBtn'
 import {Gallery} from '#/view/com/composer/photos/Gallery'
+import {GifAltText} from '#/view/com/composer/photos/GifAltTextDialog'
 import {OpenCameraBtn} from '#/view/com/composer/photos/OpenCameraBtn'
 import {SelectGifBtn} from '#/view/com/composer/photos/SelectGifBtn'
 import {SelectPhotoBtn} from '#/view/com/composer/photos/SelectPhotoBtn'
@@ -528,10 +528,6 @@ export const ComposePost = ({
     openEmojiPicker?.(textInput.current?.getCursorPosition())
   }, [openEmojiPicker])
 
-  const focusTextInput = useCallback(() => {
-    textInput.current?.focus()
-  }, [])
-
   const onSelectGif = useCallback(
     (gif: Gif) => {
       setExtLink({
@@ -813,11 +809,7 @@ export const ComposePost = ({
                 setError={setError}
               />
               <OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} />
-              <SelectGifBtn
-                onClose={focusTextInput}
-                onSelectGif={onSelectGif}
-                disabled={hasMedia}
-              />
+              <SelectGifBtn onSelectGif={onSelectGif} disabled={hasMedia} />
               {!isMobile ? (
                 <Button
                   onPress={onEmojiButtonPress}

src/view/com/composer/GifAltText.tsx → src/view/com/composer/photos/GifAltTextDialog.tsx

@@ -12,17 +12,16 @@ import {
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
 import {enforceLen} from '#/lib/strings/helpers'
-import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
+import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {Text} from '#/components/Typography'
-import {GifEmbed} from '../util/post-embeds/GifEmbed'
-import {AltTextReminder} from './photos/Gallery'
+import {AltTextReminder} from './Gallery'
 
 export function GifAltText({
   link: linkProp,
@@ -98,7 +97,7 @@ export function GifAltText({
 
       <Dialog.Outer
         control={control}
-        nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
+        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
         <Dialog.Handle />
         <AltTextInner
           onSubmit={onPressSubmit}
@@ -132,7 +131,9 @@ function AltTextInner({
   }, [onSubmit, altText])
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
+    <Dialog.ScrollableInner
+      label={_(msg`Add alt text`)}
+      keyboardDismissMode="none">
       <View style={a.flex_col_reverse}>
         <View style={[a.mt_md, a.gap_md]}>
           <View>

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -21,7 +21,9 @@ type Props = {
 
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer
+      control={props.control}
+      nativeOptions={{sheet: {snapPoints: ['100%']}}}>
       <Dialog.Handle />
 
       <ImageAltTextInner {...props} />
@@ -66,15 +68,15 @@ const ImageAltTextInner = ({
   }, [image, windim])
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
-      <Dialog.Close />
-
+    <Dialog.ScrollableInner
+      label={_(msg`Add alt text`)}
+      keyboardDismissMode="none">
       <View>
         <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
           <Trans>Add alt text</Trans>
         </Text>
 
-        <View style={[t.atoms.bg_contrast_50, a.rounded_sm, a.overflow_hidden]}>
+        <View style={[t.atoms.bg_contrast_50, a.rounded_md, a.overflow_hidden]}>
           <Image
             style={imageStyle}
             source={{
@@ -116,6 +118,8 @@ const ImageAltTextInner = ({
           </ButtonText>
         </Button>
       </View>
+
+      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }

src/view/com/composer/photos/SelectGifBtn.tsx

@@ -11,8 +11,8 @@ import {GifSelectDialog} from '#/components/dialogs/GifSelect'
 import {GifSquare_Stroke2_Corner0_Rounded as GifIcon} from '#/components/icons/Gif'
 
 type Props = {
-  onClose: () => void
   onSelectGif: (gif: Gif) => void
+  onClose?: () => void
   disabled?: boolean
 }