Focus name field when it's empty

This commit is contained in:
Brandon Presley 2022-08-23 15:58:44 +12:00
parent 05171434e4
commit 1ce9a49224

View File

@ -19,7 +19,9 @@ export default function SetForm({
end: set.reps.toString().length, end: set.reps.toString().length,
}); });
const weightRef = useRef<any>(null); const weightRef = useRef<any>(null);
const repsRef = useRef<any>(null);
const handleSubmit = () => { const handleSubmit = () => {
if (!name) return;
save({ save({
name, name,
reps: Number(reps), reps: Number(reps),
@ -40,6 +42,8 @@ export default function SetForm({
onChangeText={setName} onChangeText={setName}
autoCorrect={false} autoCorrect={false}
selectTextOnFocus selectTextOnFocus
autoFocus={!name}
onSubmitEditing={() => repsRef.current?.focus()}
/> />
<TextInput <TextInput
style={styles.marginBottom} style={styles.marginBottom}
@ -50,9 +54,10 @@ export default function SetForm({
onSubmitEditing={() => weightRef.current?.focus()} onSubmitEditing={() => weightRef.current?.focus()}
selection={selection} selection={selection}
onSelectionChange={e => setSelection(e.nativeEvent.selection)} onSelectionChange={e => setSelection(e.nativeEvent.selection)}
autoFocus autoFocus={!!name}
selectTextOnFocus selectTextOnFocus
blurOnSubmit={false} blurOnSubmit={false}
ref={repsRef}
/> />
<TextInput <TextInput
style={styles.marginBottom} style={styles.marginBottom}
@ -74,7 +79,11 @@ export default function SetForm({
/> />
<Text>{set.created?.replace('T', ' ')}</Text> <Text>{set.created?.replace('T', ' ')}</Text>
</ScrollView> </ScrollView>
<Button mode="contained" icon="save" onPress={handleSubmit}> <Button
disabled={!name}
mode="contained"
icon="save"
onPress={handleSubmit}>
Save Save
</Button> </Button>
</> </>