good

resources/css/app.css

@@ -122,4 +122,9 @@
         min-height: max(884px, 100dvh);
         -webkit-tap-highlight-color: transparent;
     }
+
+    input:focus,
+    input:focus-visible {
+        outline: none;
+    }
 }

resources/views/verification/index.blade.php

@@ -36,12 +36,12 @@
         <div class="space-y-md flex-grow">
             <div class="group relative flex items-center bg-surface-container-lowest border border-outline-variant rounded h-16 px-md transition-all duration-300 focused-input-glow focus-within:border-primary">
                 <!-- Country Code Selector (Simulated) -->
-                <button type="button" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
+                <button type="button" tabindex="-1" class="flex items-center gap-xs pr-md border-r border-outline-variant mr-md hover:bg-surface-container-low transition-colors h-10 rounded-sm">
                     <span class="font-label-md text-label-md text-on-surface">+993</span>
                 </button>
 
                 <!-- Actual Input -->
-                <input id="phone-input" name="phone_visual" class="bg-transparent border-none focus:ring-0 w-full font-otp-digit text-otp-digit text-on-surface placeholder:text-outline-variant" placeholder="6X XX XX XX" type="tel" value="{{ old('phone_visual') }}"/>
+                <input id="phone-input" name="phone_visual" autofocus autocomplete="tel" class="bg-transparent border-none outline-none focus:outline-none focus:ring-0 w-full font-otp-digit text-otp-digit text-on-surface placeholder:text-outline-variant" placeholder="6X XX XX XX" type="tel" value="{{ old('phone_visual') }}"/>
                 <input type="hidden" name="phone" id="phone-hidden" value="{{ old('phone') }}">
             </div>
             
@@ -73,6 +73,8 @@
     const hiddenInput = document.getElementById('phone-hidden');
     const form = document.getElementById('phone-form');
 
+    input.focus();
+
     input.addEventListener('input', (e) => {
         let value = e.target.value.replace(/\D/g, '');
         // format: K X XX XX XX

resources/views/verification/verify.blade.php

@@ -3,6 +3,7 @@
 @section('styles')
 <style>
     .otp-input:focus {
+        outline: none;
         box-shadow: 0 0 0 4px rgba(0, 105, 72, 0.1);
     }
     .glow-button {
@@ -57,10 +58,10 @@
 
         <!-- OTP Inputs -->
         <div class="mt-2xl flex justify-center gap-md" id="otp-container">
-            <input autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input autofocus autocomplete="one-time-code" class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
-            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border-outline-variant bg-surface-container-lowest focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
+            <input class="otp-input w-16 h-20 text-center font-otp-digit text-otp-digit rounded border border-outline-variant bg-surface-container-lowest outline-none focus:outline-none focus:border-primary focus:ring-0 transition-all" inputmode="numeric" maxlength="1" type="text"/>
         </div>
 
         <!-- Actions -->
@@ -99,6 +100,13 @@
     const form = document.getElementById('otp-form');
     const verifyBtn = document.getElementById('verify-btn');
 
+    const focusFirstOtp = () => {
+        const firstEmpty = [...inputs].find((input) => !input.value) ?? inputs[0];
+        firstEmpty?.focus();
+    };
+
+    focusFirstOtp();
+
     inputs.forEach((input, index) => {
         input.addEventListener('input', (e) => {
             if (e.target.value.length === 1 && index < inputs.length - 1) {