connect inputs together in signup (#7809)

1 files changed, 21 insertions, 5 deletions

diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx
index a6b6993dc..3be555238 100644
--- a/src/components/forms/DateField/index.android.tsx
+++ b/src/components/forms/DateField/index.android.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import {useCallback, useImperativeHandle, useState} from 'react'
+import {Keyboard} from 'react-native'
 import DatePicker from 'react-native-date-picker'
 
 import {useTheme} from '#/alf'
@@ -12,6 +13,7 @@ export const LabelText = TextField.LabelText
 
 export function DateField({
   value,
+  inputRef,
   onChangeDate,
   label,
   isInvalid,
@@ -20,9 +22,9 @@ export function DateField({
   maximumDate,
 }: DateFieldProps) {
   const t = useTheme()
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = useState(false)
 
-  const onChangeInternal = React.useCallback(
+  const onChangeInternal = useCallback(
     (date: Date) => {
       setOpen(false)
 
@@ -32,11 +34,25 @@ export function DateField({
     [onChangeDate, setOpen],
   )
 
-  const onPress = React.useCallback(() => {
+  useImperativeHandle(
+    inputRef,
+    () => ({
+      focus: () => {
+        Keyboard.dismiss()
+        setOpen(true)
+      },
+      blur: () => {
+        setOpen(false)
+      },
+    }),
+    [],
+  )
+
+  const onPress = useCallback(() => {
     setOpen(true)
   }, [])
 
-  const onCancel = React.useCallback(() => {
+  const onCancel = useCallback(() => {
     setOpen(false)
   }, [])