Как включить автозаполнение Safari для SMS OTP в Svelte с помощью компонента PinInput BitsUI ⇐ Html

[Anonymous]

Я работаю над реализацией входа в систему с помощью SMS OTP в Svelte, аналогичного процессу входа в систему Auth0. Я использую компонент PinInput из BitsUI для обработки полей ввода OTP. Моя цель — включить автозаполнение OTP, особенно в iOS, где запросы автозаполнения появляются после получения SMS с кодом.
Вот мой код:

Код: Выделить всё

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'}

Я могу успешно сфокусировать элемент ввода PIN-кода для вызова клавиатуры iOS, но подсказка автозаполнения OTP не распознает поля ввода. Я подозреваю, что это может быть связано с тем, что элемент PinInput.HiddenInput на самом деле обрабатывает автозаполнение, и, поскольку он скрыт, iOS рассматривает это как меру безопасности.
Как я могу изменить свой код, чтобы iOS распознает поля PinInput для автозаполнения OTP? Если проблема связана со скрытым вводом, существует ли способ заставить автозаполнение работать при использовании компонента PinInput BitsUI?

Подробнее здесь: https://stackoverflow.com/questions/793 ... input-comp