ui phase 3

client/src/components/OtpInput/OtpInput.tsx

@@ -87,8 +87,13 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
   };
 
   const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Backspace' && !chars[index]) {
+    if (event.key === 'Backspace' && !chars[index] && index > 0) {
+      // Empty box + backspace clears the previous digit too, so one keypress erases one digit
+      // instead of the first press only moving focus and the second doing the clearing.
+      const next = [...chars];
+      next[index - 1] = '';
       focusBox(index - 1);
+      emit(next);
     }
   };
 
@@ -122,6 +127,8 @@ const OtpInput: FunctionComponent<OtpInputProps> = ({
             htmlInput: {
               inputMode: 'numeric',
               maxLength: 1,
+              // Lets iOS/Android offer the SMS code as a keyboard suggestion even without WebOTP.
+              autoComplete: 'one-time-code',
               'aria-label': `${ariaLabel ?? 'digit'} ${index + 1}`,
               style: { textAlign: 'center', fontSize: '1.25rem', width: BOX_SIZE, padding: 8 },
             },