Fix tests

packages/ui/src/list-context.js

@@ -1,6 +1,6 @@
 import Alpine from "../../alpinejs/src/alpine"
 
-export function generateContext(multiple) {
+export function generateContext(multiple, orientation) {
     return {
         /**
          * Main state...
@@ -366,12 +366,12 @@ export function generateContext(multiple) {
                     break;
 
                     break;
-                case ['ArrowDown', 'ArrowRight'][0]: // @todo handle orientation switching.
+                case ['ArrowDown', 'ArrowRight'][orientation === 'vertical' ? 0 : 1]:
                     e.preventDefault(); e.stopPropagation()
                     targetKey = hasActive ? this.nextKey() : this.firstKey()
                     break;
 
-                case ['ArrowUp', 'ArrowLeft'][0]:
+                case ['ArrowUp', 'ArrowLeft'][orientation === 'vertical' ? 0 : 1]:
                     e.preventDefault(); e.stopPropagation()
                     targetKey = hasActive ? this.prevKey() : this.lastKey()
                     break;

packages/ui/src/listbox.js

@@ -79,13 +79,19 @@ function handleRoot(el, Alpine) {
                 __isMultiple: undefined,
                 __isStatic: false,
                 __isDisabled: undefined,
+                __orientation: 'vertical',
                 init() {
                     this.__isMultiple = Alpine.bound(el, 'multiple', false)
                     this.__isDisabled = Alpine.bound(el, 'disabled', false)
                     this.__inputName = Alpine.bound(el, 'name', null)
                     this.__compareBy = Alpine.bound(el, 'by')
+                    this.__orientation = Alpine.bound(el, 'horizontal', false) ? 'horizontal' : 'vertical'
 
-                    this.__context = generateContext(this.__isMultiple)
+                    this.__context = generateContext(this.__isMultiple, this.__orientation)
+
+                    let defaultValue = Alpine.bound(el, 'default-value', null)
+
+                    this.__value = defaultValue
 
                     // We have to wait for the rest of the HTML to initialize in Alpine before
                     // we mark this component as "ready".
@@ -103,6 +109,7 @@ function handleRoot(el, Alpine) {
                             let lastValueFingerprint = false
 
                             Alpine.effect(() => {
+                                // Accessing selected keys, so a change in it always triggers this effect...
                                 this.__context.selectedKeys
 
                                 if (lastValueFingerprint === false || lastValueFingerprint !== JSON.stringify(this.__value)) {
@@ -187,7 +194,9 @@ function handleOptions(el, Alpine) {
         '@keydown.escape.stop.prevent'() { this.$data.__close() },
         tabindex: '0',
         'role': 'listbox',
-        'aria-orientation': 'vertical',
+        ':aria-orientation'() {
+            return this.$data.__orientation
+        },
         ':aria-labelledby'() { return this.$id('alpine-listbox-button') },
         ':aria-activedescendant'() { return this.__context.activeEl() && this.__context.activeEl().id },
         '@focus'() { this.__context.activateSelectedOrFirst() },

tests/cypress/integration/plugins/ui/listbox.spec.js

@@ -282,7 +282,6 @@ test('"name" prop with object value',
     },
 );
 
-// @todo: support default-value
 test('"default-value" prop',
     [html`
         <div
@@ -562,7 +561,6 @@ test('keyboard controls',
     },
 )
 
-// @todo support horizontal prop
 test('"horizontal" keyboard controls',
     [html`
         <div
@@ -608,7 +606,7 @@ test('"horizontal" keyboard controls',
         get('.active').should(notExist())
         get('button').focus().type(' ')
         get('[options]')
-            .should(haveAttribute('orientation', 'horizontal'))
+            .should(haveAttribute('aria-orientation', 'horizontal'))
             .should(beVisible())
             .should(haveFocus())
         get('[option="1"]')
@@ -683,7 +681,6 @@ test('search',
     },
 )
 
-// @todo make sure $listboxOption.isSelected works in this case (aria-selected and the values are working correctly but the class is not applied)
 test('changing value manually changes internal state',
     [html`
         <div
@@ -727,10 +724,6 @@ test('changing value manually changes internal state',
         </div>
     `],
     ({ get }) => {
-        get('[toggle]').click()
-        get('[option="2"]')
-            .click()
-            .should(haveClasses(['selected']))
         get('[select-tim]').click()
         get('[option="4"]').should(haveClasses(['selected']))
         get('[option="1"]').should(notHaveClasses(['selected']))