From 2e2fae378af09682370e9b4ebf59d32cae1b848c Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 19 Mar 2024 20:21:25 -0700
Subject: [PATCH] Set keyboardDismisMode to interactive on the report dialog
 (#3288)

---
 src/components/Dialog/index.tsx       | 8 ++++++--
 src/components/Dialog/types.ts        | 8 +++++++-
 src/components/ReportDialog/index.tsx | 4 +++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 0da2919c..a85a1c4f 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 b1a46f85..91d86cb5 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 f01ff3f3..6a7aa6ff 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" />