So aktivieren Sie Safari Autofill für SMS OTP in Svelte mithilfe der PinInput-Komponente von BitsUI ⇐ JavaScript

[Anonymous]

Ich arbeite an der Implementierung einer SMS-OTP-Anmeldung in Svelte, ähnlich dem Anmeldeablauf von Auth0. Ich verwende die PinInput-Komponente von BitsUI, um die OTP-Eingabefelder zu verarbeiten. Mein Ziel ist es, das automatische Ausfüllen für das OTP zu aktivieren, insbesondere auf iOS, wo nach Erhalt einer SMS mit dem Code Aufforderungen zum automatischen Ausfüllen angezeigt werden.
Hier ist mein Code:

Code: Select all

import { tick } from "svelte";
import { PinInput } from "bits-ui";

let pinInputRef: InstanceType;
let isPinVisible = $state(false);

async function handleSubmit(e: SubmitEvent) {
e.preventDefault();
if (!isPinVisible) {
isPinVisible = true;
await tick();
// Find and focus the first PIN input after it becomes visible
const firstInput = document.querySelector('[data-pin-input-input]') as HTMLInputElement;
firstInput?.focus();
}
}







bind:this={pinInputRef}
enterkeyhint="go"
autocomplete="one-time-code"
class="grid grid-cols-6 gap-2 w-full max-w-lg mx-auto text-lg font-semibold text-neutral-500"
>
{#each Array(6) as _}

{/each}





{isPinVisible ? 'Verify' : 'Continue'}

Ich kann das PIN-Eingabeelement erfolgreich fokussieren, um die iOS-Tastatur aufzurufen, aber die OTP-Autofill-Eingabeaufforderung erkennt die Eingabefelder nicht. Ich vermute, dass das daran liegen könnte, dass das PinInput.HiddenInput-Element tatsächlich das automatische Ausfüllen übernimmt, und da es ausgeblendet ist, behandelt iOS dies als Sicherheitsmaßnahme.
Wie kann ich meinen Code so ändern, dass iOS erkennt die PinInput-Felder für das automatische Ausfüllen von OTP? Wenn die versteckte Eingabe das Problem verursacht, gibt es eine Problemumgehung, damit das automatische Ausfüllen funktioniert, während die PinInput-Komponente von BitsUI verwendet wird?