connect inputs together in signup (#7809)

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)
   }, [])
 

src/components/forms/DateField/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useImperativeHandle} from 'react'
 import {Keyboard, View} from 'react-native'
 import DatePicker from 'react-native-date-picker'
 import {msg, Trans} from '@lingui/macro'
@@ -25,6 +25,7 @@ export const LabelText = TextField.LabelText
  */
 export function DateField({
   value,
+  inputRef,
   onChangeDate,
   testID,
   label,
@@ -36,7 +37,7 @@ export function DateField({
   const t = useTheme()
   const control = Dialog.useDialogControl()
 
-  const onChangeInternal = React.useCallback(
+  const onChangeInternal = useCallback(
     (date: Date | undefined) => {
       if (date) {
         const formatted = toSimpleDateString(date)
@@ -46,6 +47,20 @@ export function DateField({
     [onChangeDate],
   )
 
+  useImperativeHandle(
+    inputRef,
+    () => ({
+      focus: () => {
+        Keyboard.dismiss()
+        control.open()
+      },
+      blur: () => {
+        control.close()
+      },
+    }),
+    [control],
+  )
+
   return (
     <>
       <DateFieldButton

src/components/forms/DateField/index.web.tsx

@@ -34,6 +34,7 @@ const Input = TextField.createInput(InputBase as unknown as typeof TextInput)
 
 export function DateField({
   value,
+  inputRef,
   onChangeDate,
   label,
   isInvalid,
@@ -58,9 +59,9 @@ export function DateField({
       <TextField.Icon icon={CalendarDays} />
       <Input
         value={toSimpleDateString(value)}
+        inputRef={inputRef as React.Ref<TextInput>}
         label={label}
         onChange={handleOnChange}
-        onChangeText={() => {}}
         testID={testID}
         accessibilityHint={accessibilityHint}
         // @ts-expect-error not typed as <input type="date"> even though it is one

src/components/forms/DateField/types.ts

@@ -1,7 +1,12 @@
+export type DateFieldRef = {
+  focus: () => void
+  blur: () => void
+}
 export type DateFieldProps = {
   value: string | Date
   onChangeDate: (date: string) => void
   label: string
+  inputRef?: React.Ref<DateFieldRef>
   isInvalid?: boolean
   testID?: string
   accessibilityHint?: string