+21 -5

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

··· 1 1 - import React from 'react' 1 1 + import {useCallback, useImperativeHandle, useState} from 'react' 2 2 + import {Keyboard} from 'react-native' 2 3 import DatePicker from 'react-native-date-picker' 3 4 4 5 import {useTheme} from '#/alf' ··· 12 13 13 14 export function DateField({ 14 15 value, 16 16 + inputRef, 15 17 onChangeDate, 16 18 label, 17 19 isInvalid, ··· 20 22 maximumDate, 21 23 }: DateFieldProps) { 22 24 const t = useTheme() 23 23 - const [open, setOpen] = React.useState(false) 25 25 + const [open, setOpen] = useState(false) 24 26 25 25 - const onChangeInternal = React.useCallback( 27 27 + const onChangeInternal = useCallback( 26 28 (date: Date) => { 27 29 setOpen(false) 28 30 ··· 32 34 [onChangeDate, setOpen], 33 35 ) 34 36 35 35 - const onPress = React.useCallback(() => { 37 37 + useImperativeHandle( 38 38 + inputRef, 39 39 + () => ({ 40 40 + focus: () => { 41 41 + Keyboard.dismiss() 42 42 + setOpen(true) 43 43 + }, 44 44 + blur: () => { 45 45 + setOpen(false) 46 46 + }, 47 47 + }), 48 48 + [], 49 49 + ) 50 50 + 51 51 + const onPress = useCallback(() => { 36 52 setOpen(true) 37 53 }, []) 38 54 39 39 - const onCancel = React.useCallback(() => { 55 55 + const onCancel = useCallback(() => { 40 56 setOpen(false) 41 57 }, []) 42 58

+17 -2

src/components/forms/DateField/index.tsx

··· 1 1 - import React from 'react' 1 1 + import {useCallback, useImperativeHandle} from 'react' 2 2 import {Keyboard, View} from 'react-native' 3 3 import DatePicker from 'react-native-date-picker' 4 4 import {msg, Trans} from '@lingui/macro' ··· 25 25 */ 26 26 export function DateField({ 27 27 value, 28 28 + inputRef, 28 29 onChangeDate, 29 30 testID, 30 31 label, ··· 36 37 const t = useTheme() 37 38 const control = Dialog.useDialogControl() 38 39 39 39 - const onChangeInternal = React.useCallback( 40 40 + const onChangeInternal = useCallback( 40 41 (date: Date | undefined) => { 41 42 if (date) { 42 43 const formatted = toSimpleDateString(date) ··· 44 45 } 45 46 }, 46 47 [onChangeDate], 48 48 + ) 49 49 + 50 50 + useImperativeHandle( 51 51 + inputRef, 52 52 + () => ({ 53 53 + focus: () => { 54 54 + Keyboard.dismiss() 55 55 + control.open() 56 56 + }, 57 57 + blur: () => { 58 58 + control.close() 59 59 + }, 60 60 + }), 61 61 + [control], 47 62 ) 48 63 49 64 return (

+2 -1

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

··· 34 34 35 35 export function DateField({ 36 36 value, 37 37 + inputRef, 37 38 onChangeDate, 38 39 label, 39 40 isInvalid, ··· 58 59 <TextField.Icon icon={CalendarDays} /> 59 60 <Input 60 61 value={toSimpleDateString(value)} 62 62 + inputRef={inputRef as React.Ref<TextInput>} 61 63 label={label} 62 64 onChange={handleOnChange} 63 63 - onChangeText={() => {}} 64 65 testID={testID} 65 66 accessibilityHint={accessibilityHint} 66 67 // @ts-expect-error not typed as <input type="date"> even though it is one

+5

src/components/forms/DateField/types.ts

··· 1 1 + export type DateFieldRef = { 2 2 + focus: () => void 3 3 + blur: () => void 4 4 + } 1 5 export type DateFieldProps = { 2 6 value: string | Date 3 7 onChangeDate: (date: string) => void 4 8 label: string 9 9 + inputRef?: React.Ref<DateFieldRef> 5 10 isInvalid?: boolean 6 11 testID?: string 7 12 accessibilityHint?: string

+25 -2

src/screens/Signup/StepInfo/index.tsx

··· 1 1 import React, {useRef} from 'react' 2 2 - import {View} from 'react-native' 2 2 + import {TextInput, View} from 'react-native' 3 3 import {msg, Trans} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 import * as EmailValidator from 'email-validator' ··· 11 11 import {ScreenTransition} from '#/screens/Login/ScreenTransition' 12 12 import {is13, is18, useSignupContext} from '#/screens/Signup/state' 13 13 import {Policies} from '#/screens/Signup/StepInfo/Policies' 14 14 - import {atoms as a} from '#/alf' 14 14 + import {atoms as a, native} from '#/alf' 15 15 import * as DateField from '#/components/forms/DateField' 16 16 + import {DateFieldRef} from '#/components/forms/DateField/types' 16 17 import {FormError} from '#/components/forms/FormError' 17 18 import {HostingProvider} from '#/components/forms/HostingProvider' 18 19 import * as TextField from '#/components/forms/TextField' ··· 50 51 const emailValueRef = useRef<string>(state.email) 51 52 const prevEmailValueRef = useRef<string>(state.email) 52 53 const passwordValueRef = useRef<string>(state.password) 54 54 + 55 55 + const emailInputRef = useRef<TextInput>(null) 56 56 + const passwordInputRef = useRef<TextInput>(null) 57 57 + const birthdateInputRef = useRef<DateFieldRef>(null) 53 58 54 59 const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false) 55 60 ··· 155 160 autoCapitalize="none" 156 161 autoComplete="email" 157 162 keyboardType="email-address" 163 163 + returnKeyType="next" 164 164 + submitBehavior={native('submit')} 165 165 + onSubmitEditing={native(() => 166 166 + emailInputRef.current?.focus(), 167 167 + )} 158 168 /> 159 169 </TextField.Root> 160 170 </View> ··· 167 177 <TextField.Icon icon={Envelope} /> 168 178 <TextField.Input 169 179 testID="emailInput" 180 180 + inputRef={emailInputRef} 170 181 onChangeText={value => { 171 182 emailValueRef.current = value.trim() 172 183 if (hasWarnedEmail) { ··· 178 189 autoCapitalize="none" 179 190 autoComplete="email" 180 191 keyboardType="email-address" 192 192 + returnKeyType="next" 193 193 + submitBehavior={native('submit')} 194 194 + onSubmitEditing={native(() => 195 195 + passwordInputRef.current?.focus(), 196 196 + )} 181 197 /> 182 198 </TextField.Root> 183 199 </View> ··· 189 205 <TextField.Icon icon={Lock} /> 190 206 <TextField.Input 191 207 testID="passwordInput" 208 208 + inputRef={passwordInputRef} 192 209 onChangeText={value => { 193 210 passwordValueRef.current = value 194 211 }} ··· 197 214 secureTextEntry 198 215 autoComplete="new-password" 199 216 autoCapitalize="none" 217 217 + returnKeyType="next" 218 218 + submitBehavior={native('blurAndSubmit')} 219 219 + onSubmitEditing={native(() => 220 220 + birthdateInputRef.current?.focus(), 221 221 + )} 200 222 /> 201 223 </TextField.Root> 202 224 </View> ··· 206 228 </DateField.LabelText> 207 229 <DateField.DateField 208 230 testID="date" 231 231 + inputRef={birthdateInputRef} 209 232 value={state.dateOfBirth} 210 233 onChangeDate={date => { 211 234 dispatch({