From 08bf76e762cd452bc2640428e3a7726881720486 Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Mon, 27 Jul 2026 10:20:53 +0200
Subject: [PATCH] Make the OTP boxes focus the input when tapped

The overlaid OTP input has pointer-events: none so clicks land on the
decorative boxes, but that also means a tap never reached the real input
on a touchscreen (desktop got away with it via autofocus/Tab). Wrapping
the boxes in a <label for> restores focus-on-click without adding a DOM
child that would throw off the otp box count.
---
 authentication/tests.py                | 14 ++++++++++++
 templates/allauth/elements/fields.html | 30 ++++++++++++++++++--------
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/authentication/tests.py b/authentication/tests.py
index d44dfe5..a3b62d7 100644
--- a/authentication/tests.py
+++ b/authentication/tests.py
@@ -276,6 +276,20 @@ class TwoFactorPageTests(TestCase):
 
         self.assertEqual(otp.count("<span></span>"), 6)
 
+    def test_the_boxes_are_wrapped_in_a_label_so_tapping_focuses_the_input(self):
+        # daisyUI's overlaid otp input carries `pointer-events: none` (so clicks land on the
+        # boxes, not a naked input) — which also means a tap on the boxes never reaches the
+        # input directly. A <label for> is what closes that gap: browsers focus a labelled
+        # control on click regardless of the control's own pointer-events. Without this
+        # wrapper the field cannot be entered on a touchscreen, which has no Tab key to fall
+        # back on.
+        html = self.response.content.decode()
+        label_start = html.index('<label class="contents"')
+        otp_start = html.index('class="otp otp-lg"')
+
+        self.assertLess(label_start, otp_start)
+        self.assertIn('for="id_code"', html[label_start : label_start + 60])
+
     def test_the_otp_field_has_no_placeholder(self):
         # allauth sets placeholder="Code"; inside the boxes it reads as a typed-in code.
         self.assertNotContains(self.response, 'placeholder="Code"')
diff --git a/templates/allauth/elements/fields.html b/templates/allauth/elements/fields.html
index ab228ee..6481eae 100644
--- a/templates/allauth/elements/fields.html
+++ b/templates/allauth/elements/fields.html
@@ -52,18 +52,30 @@
 
                         For the same reason the sr-only label lives outside the container: another
                         child would throw the count off again.
+
+                        The overlaid input carries daisyUI's own `pointer-events: none` (it exists so
+                        clicks land on the boxes, not a naked input) — which also means a tap/click on
+                        the boxes never reaches the input directly. A <label for> is what actually
+                        closes that gap: browsers focus a labelled control on click regardless of the
+                        control's own pointer-events, so wrapping the boxes in one (without adding a
+                        child *inside* the otp container, which would break the nth-child count above)
+                        makes the whole visible field tappable. Without it the field is a decorative
+                        box nobody can enter a code into — invisible on desktop, where autofocus or Tab
+                        gets you there anyway, but a dead end on mobile, which has neither.
                     {% endcomment %}
                             <label class="sr-only" for="{{ field.id_for_label }}">{{ field.label }}</label>
                             <div class="flex justify-center">
-                                <div class="otp otp-lg" data-otp>
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                    <span></span>
-                                    {{ field|as_otp }}
-                                </div>
+                                <label class="contents" for="{{ field.id_for_label }}">
+                                    <div class="otp otp-lg" data-otp>
+                                        <span></span>
+                                        <span></span>
+                                        <span></span>
+                                        <span></span>
+                                        <span></span>
+                                        <span></span>
+                                        {{ field|as_otp }}
+                                    </div>
+                                </label>
                             </div>
                         {% elif icon %}
                             <label class="input flex w-full items-center gap-2 {% if field.errors %}input-error{% endif %}" for="{{ field.id_for_label }}">