From 3f1ed69a236e6fc2c87f51f87f7f2247d3c20a54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gu=CC=88nther=20Debrauwer?= <gunther@nextapps.be>
Date: Fri, 19 Jul 2024 14:25:30 +0200
Subject: [PATCH 1/3] Add failing tests

---
 .../integration/plugins/ui/radio.spec.js      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/tests/cypress/integration/plugins/ui/radio.spec.js b/tests/cypress/integration/plugins/ui/radio.spec.js
index 7106ee610..138eeb1e0 100644
--- a/tests/cypress/integration/plugins/ui/radio.spec.js
+++ b/tests/cypress/integration/plugins/ui/radio.spec.js
@@ -253,6 +253,49 @@ test('keyboard navigation works',
     },
 )
 
+test('keyboard navigation works when first option has null as value',
+    [html`
+        <main x-data="{ active: null }">
+            <div x-radio x-model="active">
+                <div x-radio:option option="option-null" :value="null"></div>
+                <div x-radio:option option="option-1" value="1"></div>
+                <div x-radio:option option="option-2" value="2"></div>
+            </div>
+
+            <input x-model="active" type="hidden">
+        </main>
+    `],
+    ({ get }) => {
+        get('[option="option-1"]').focus().type('{downarrow}')
+        get('[option="option-2"]').should(haveFocus()).type('{uparrow}')
+        get('[option="option-1"]').should(haveFocus()).type('{uparrow}')
+        get('[option="option-null"]').should(haveFocus()).type('{uparrow}')
+        get('[option="option-2"]').should(haveFocus()).type('{downarrow}')
+        get('[option="option-null"]').should(haveFocus())
+    },
+)
+
+test('keyboard navigation works when last option has null as value',
+    [html`
+        <main x-data="{ active: null }">
+            <div x-radio x-model="active">
+                <div x-radio:option option="option-1" value="1"></div>
+                <div x-radio:option option="option-2" value="2"></div>
+                <div x-radio:option option="option-null" :value="null"></div>
+            </div>
+
+            <input x-model="active" type="hidden">
+        </main>
+    `],
+    ({ get }) => {
+        get('[option="option-1"]').focus().type('{downarrow}')
+        get('[option="option-2"]').should(haveFocus()).type('{downarrow}')
+        get('[option="option-null"]').should(haveFocus()).type('{downarrow}')
+        get('[option="option-1"]').should(haveFocus()).type('{uparrow}')
+        get('[option="option-null"]').should(haveFocus())
+    },
+)
+
 test('has accessibility attributes',
     [html`
         <main x-data="{ active: null, access: [

From e404701d8a8b40ecf37b1536a0bf3866bba5fcf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gu=CC=88nther=20Debrauwer?= <gunther@nextapps.be>
Date: Fri, 19 Jul 2024 14:27:51 +0200
Subject: [PATCH 2/3] Fix keyboard navigation bug

---
 packages/ui/src/radio.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/radio.js b/packages/ui/src/radio.js
index 2fe20a47f..c06d94132 100644
--- a/packages/ui/src/radio.js
+++ b/packages/ui/src/radio.js
@@ -106,8 +106,8 @@ function handleRoot(el, Alpine) {
                 __focusOptionNext() {
                     let option = this.__active
                     let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))
-                    let next = all[this.__optionValues.indexOf(option) + 1]
-                    next = next || all[0]
+                    let index = all.indexOf(option)
+                    let next = all.length > index + 1 ? all[index + 1] : all[0]
 
                     this.__optionElsByValue.get(next).focus()
                     this.__change(next)
@@ -115,8 +115,8 @@ function handleRoot(el, Alpine) {
                 __focusOptionPrev() {
                     let option = this.__active
                     let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))
-                    let prev = all[all.indexOf(option) - 1]
-                    prev = prev || all.slice(-1)[0]
+                    let index = all.indexOf(option)
+                    let prev = index >= 1 ? all[all.indexOf(option) - 1] : all.slice(-1)[0]
 
                     this.__optionElsByValue.get(prev).focus()
                     this.__change(prev)

From 1ccacfa42708e60fdd409a54b0985a23ad7efc0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gu=CC=88nther=20Debrauwer?= <gunther@nextapps.be>
Date: Fri, 19 Jul 2024 16:09:27 +0200
Subject: [PATCH 3/3] Refactoring

---
 packages/ui/src/radio.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/radio.js b/packages/ui/src/radio.js
index c06d94132..f01280865 100644
--- a/packages/ui/src/radio.js
+++ b/packages/ui/src/radio.js
@@ -107,7 +107,7 @@ function handleRoot(el, Alpine) {
                     let option = this.__active
                     let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))
                     let index = all.indexOf(option)
-                    let next = all.length > index + 1 ? all[index + 1] : all[0]
+                    let next = all[(index + 1 + all.length) % all.length]
 
                     this.__optionElsByValue.get(next).focus()
                     this.__change(next)
@@ -116,7 +116,7 @@ function handleRoot(el, Alpine) {
                     let option = this.__active
                     let all = this.__optionValues.filter(i => !this.__disabledOptions.has(i))
                     let index = all.indexOf(option)
-                    let prev = index >= 1 ? all[all.indexOf(option) - 1] : all.slice(-1)[0]
+                    let prev = all[(index - 1 + all.length) % all.length]
 
                     this.__optionElsByValue.get(prev).focus()
                     this.__change(prev)