Set keyboardDismisMode to interactive on the report dialog (#3288)

3 files changed, 16 insertions, 4 deletions

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 0da2919c5..a85a1c4fd 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -206,12 +206,16 @@ export function Inner({children, style}: DialogInnerProps) {
   )
 }
 
-export function ScrollableInner({children, style}: DialogInnerProps) {
+export function ScrollableInner({
+  children,
+  keyboardDismissMode,
+  style,
+}: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
     <BottomSheetScrollView
       keyboardShouldPersistTaps="handled"
-      keyboardDismissMode="on-drag"
+      keyboardDismissMode={keyboardDismissMode || 'on-drag'}
       style={[
         a.flex_1, // main diff is this
         a.p_xl,
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index b1a46f853..91d86cb53 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -1,5 +1,9 @@
 import React from 'react'
-import type {AccessibilityProps, GestureResponderEvent} from 'react-native'
+import type {
+  AccessibilityProps,
+  GestureResponderEvent,
+  ScrollViewProps,
+} from 'react-native'
 import {BottomSheetProps} from '@gorhom/bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
@@ -61,9 +65,11 @@ export type DialogInnerProps =
       label?: undefined
       accessibilityLabelledBy: A11yProps['aria-labelledby']
       accessibilityDescribedBy: string
+      keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
     }>
   | DialogInnerPropsBase<{
       label: string
       accessibilityLabelledBy?: undefined
       accessibilityDescribedBy?: undefined
+      keyboardDismissMode?: ScrollViewProps['keyboardDismissMode']
     }>
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index f01ff3f3b..6a7aa6ff2 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -37,7 +37,9 @@ function ReportDialogInner(props: ReportDialogProps) {
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
   return (
-    <Dialog.ScrollableInner label="Report Dialog">
+    <Dialog.ScrollableInner
+      label="Report Dialog"
+      keyboardDismissMode="interactive">
       {isLoading ? (
         <View style={[a.align_center, {height: 100}]}>
           <Loader size="xl" />