pin code input supports pressing enter to confirm and pressing tab to switch to the next component

src/components/common/PinCodeInput.vue

@@ -33,6 +33,7 @@ const props = defineProps<{
     length: number;
     disabled?: boolean;
     autofocus?: boolean;
+    autoConfirm?: boolean;
     secure?: boolean;
 }>();
 
@@ -151,6 +152,14 @@ function onKeydown(index: number, event: KeyboardEvent): void {
         return;
     }
 
+    if (index <= 0 && (event.shiftKey && event.key === 'Tab')) {
+        return;
+    }
+
+    if (index >= props.length - 1 && (!event.shiftKey && event.key === 'Tab')) {
+        return;
+    }
+
     if (event.key === 'Enter' && finalPinCode.value.length === props.length) {
         emit('pincode:confirm', finalPinCode.value);
         event.preventDefault();
@@ -204,7 +213,7 @@ function onKeydown(index: number, event: KeyboardEvent): void {
         setInputType(index);
         setNextFocus(index);
 
-        if (finalPinCode.value.length === props.length) {
+        if (props.autoConfirm && finalPinCode.value.length === props.length) {
             emit('pincode:confirm', finalPinCode.value);
         }
     }

src/components/mobile/PinCodeInputSheet.vue

@@ -10,7 +10,7 @@
                 <p class="no-margin">{{ hint }}</p>
                 <f7-list class="no-margin">
                     <f7-list-item class="list-item-pincode-input padding-vertical-half">
-                        <pin-code-input :secure="true" :length="6" v-model="currentPinCode"/>
+                        <pin-code-input :secure="true" :length="6" v-model="currentPinCode" @pincode:confirm="confirm"/>
                     </f7-list-item>
                 </f7-list>
                 <f7-button large fill