UI x-radio: fix keyboard navigation when value of first/last radio option is null (#4308)

* Add failing tests

* Fix keyboard navigation bug

* Refactoring

Author: gdebrauwer

packages/ui/src/radio.js

@@ -106,17 +106,17 @@ 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[(index + 1 + all.length) % all.length]
 
                     this.__optionElsByValue.get(next).focus()
                     this.__change(next)
                 },
                 __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 = all[(index - 1 + all.length) % all.length]
 
                     this.__optionElsByValue.get(prev).focus()
                     this.__change(prev)

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: [