Alpine JS中x-trap在OTP输入框切换时的异常问题

我有一个由8个单字符输入框组成的OTP输入组件，在通过x-on:keyup实现输入框间切换时，首个输入框会短暂获得焦点并选中内容，之后才切换到目标输入框。

组件代码 #

<div class="flex w-full content-center">
    <form x-transition wire:submit.prevent.throttle.1000ms="verifyotp()" class="w-full">
        <div x-data="{digitinputnumber : 1}" class="w-full px-4 grid gap-4">
            <div class="flex items-center mb-4 dark:text-white">
                <span class="bg-slate-100 dark:bg-gray-500 rounded p-1 ml-1">
                    <x-icon.shield-check/>
                </span>
                <h3>{{ __('messages.login.enter-otp') }}</h3>
            </div>

            <div class="flex gap-2 ltr justify-center">

                <div>
                    <input x-model="d1" select-none  x-on:click="digitinputnumber = 1" x-on:keyup="if($event.key != 'Backspace' && 0 <= d1 && d1 <= 9) {digitinputnumber = digitinputnumber + 1} else {}" x-trap="digitinputnumber == 1 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d2" x-on:click="digitinputnumber = 2" x-on:keyup="if($event.key != 'Backspace' && 0 <= d2 && d2 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 2 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d3" x-on:click="digitinputnumber = 3" x-on:keyup="if($event.key != 'Backspace' && 0 <= d3 && d3 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap.="digitinputnumber == 3 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d4" x-on:click="digitinputnumber = 4" x-on:keyup="if($event.key != 'Backspace' && 0 <= d4 && d4 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 4 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d5" x-on:click="digitinputnumber = 5" x-on:keyup="if($event.key != 'Backspace' && 0 <= d5 && d5 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 5 ? true : false"x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d6" x-on:click="digitinputnumber = 6" x-on:keyup="if($event.key != 'Backspace' && 0 <= d6 && d6 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 6 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d7" x-on:click="digitinputnumber = 7" x-on:keyup="if($event.key != 'Backspace' && 0 <= d7 && d7 <= 9) {digitinputnumber = digitinputnumber + 1} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 7 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>
                <div>
                    <input x-model="d8" x-on:click="digitinputnumber = 8" x-on:keyup="if($event.key != 'Backspace' && 0 <= d8 && d8 <= 9) {} else {digitinputnumber = digitinputnumber - 1}" x-trap="digitinputnumber == 8 ? true : false" x-mask="9" type="text" class="p-2 w-12 aspect-square text-center ltr text-xl rounded-lg">
                </div>

            </div>
        </div>
    </form>
</div>

已在Livewire和Alpine的GitHub讨论区提问，也未在官方文档及技术论坛找到解决方案。

内容的提问来源于stack exchange，提问作者Mehdi