Move cursor to next input for workouts editing

EditWorkout.tsx

@@ -4,8 +4,8 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
-import React, {useCallback, useContext, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import React, {useCallback, useContext, useRef, useState} from 'react';
+import {ScrollView, TextInput, View} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
 import ConfirmDialog from './ConfirmDialog';
@@ -33,6 +33,10 @@ export default function EditWorkout() {
   const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
   const {toast} = useContext(SnackbarContext);
   const navigation = useNavigation();
+  const setsRef = useRef<TextInput>(null);
+  const stepsRef = useRef<TextInput>(null);
+  const minutesRef = useRef<TextInput>(null);
+  const secondsRef = useRef<TextInput>(null);
 
   useFocusEffect(
     useCallback(() => {
@@ -107,6 +111,11 @@ export default function EditWorkout() {
       toast('Commas and single quotes would break CSV exports', 6000);
   };
 
+  const submitName = () => {
+    if (settings.steps) stepsRef.current?.focus();
+    else setsRef.current?.focus();
+  };
+
   return (
     <View style={{padding: PADDING}}>
       <ScrollView style={{height: '90%'}}>
@@ -115,33 +124,42 @@ export default function EditWorkout() {
           label="Name"
           value={name}
           onChangeText={handleName}
+          onSubmitEditing={submitName}
         />
         {!!settings.steps && (
           <MassiveInput
+            innerRef={stepsRef}
             selectTextOnFocus={false}
             value={steps}
             onChangeText={handleSteps}
             label="Steps"
             multiline
+            onSubmitEditing={setsRef.current?.focus}
           />
         )}
         <MassiveInput
+          innerRef={setsRef}
           value={sets}
           onChangeText={setSets}
           label="Sets per workout"
           keyboardType="numeric"
+          onSubmitEditing={minutesRef.current?.focus}
         />
         <MassiveInput
+          innerRef={minutesRef}
+          onSubmitEditing={secondsRef.current?.focus}
           value={minutes}
           onChangeText={setMinutes}
           label="Rest minutes"
           keyboardType="numeric"
         />
         <MassiveInput
+          innerRef={secondsRef}
           value={seconds}
           onChangeText={setSeconds}
           label="Rest seconds"
           keyboardType="numeric"
+          blurOnSubmit
         />
         {uri ? (
           <TouchableRipple

MassiveInput.tsx

@@ -18,6 +18,7 @@ export default function MassiveInput(
       style={{marginBottom: MARGIN, minWidth: 100}}
       selectTextOnFocus
       ref={props.innerRef}
+      blurOnSubmit={false}
       {...props}
     />
   );

SetForm.tsx

@@ -1,5 +1,5 @@
 import React, {useContext, useRef, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import {ScrollView, TextInput, View} from 'react-native';
 import {Button, Text} from 'react-native-paper';
 import MassiveInput from './MassiveInput';
 import {SnackbarContext} from './MassiveSnack';
@@ -25,9 +25,9 @@ export default function SetForm({
     end: set.reps.toString().length,
   });
   const {toast} = useContext(SnackbarContext);
-  const weightRef = useRef<any>(null);
-  const repsRef = useRef<any>(null);
-  const unitRef = useRef<any>(null);
+  const weightRef = useRef<TextInput>(null);
+  const repsRef = useRef<TextInput>(null);
+  const unitRef = useRef<TextInput>(null);
 
   const handleSubmit = async () => {
     console.log(`${SetForm.name}.handleSubmit:`, {set});
@@ -72,7 +72,6 @@ export default function SetForm({
           onChangeText={handleName}
           autoCorrect={false}
           autoFocus={!name}
-          blurOnSubmit={false}
           onSubmitEditing={() => repsRef.current?.focus()}
         />
         <MassiveInput
@@ -84,7 +83,6 @@ export default function SetForm({
           selection={selection}
           onSelectionChange={e => setSelection(e.nativeEvent.selection)}
           autoFocus={!!name}
-          blurOnSubmit={false}
           innerRef={repsRef}
         />
         <MassiveInput