diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
index 708ac1a4a..636bd448e 100644
--- a/packages/ui/src/combobox.js
+++ b/packages/ui/src/combobox.js
@@ -222,7 +222,7 @@ function handleRoot(el, Alpine) {
let item = this.__context.getItemByEl(el)
if (! item) return false
- if (! item.value) return false
+ if (item.value === null || item.value === undefined) return false
return this.__hasSelected(item.value)
},
diff --git a/packages/ui/src/listbox.js b/packages/ui/src/listbox.js
index 97e0eb048..82f6ae0d1 100644
--- a/packages/ui/src/listbox.js
+++ b/packages/ui/src/listbox.js
@@ -199,7 +199,7 @@ function handleRoot(el, Alpine) {
let item = this.__context.getItemByEl(el)
if (! item) return false
- if (! item.value) return false
+ if (item.value === null || item.value === undefined) return false
return this.__hasSelected(item.value)
},
diff --git a/tests/cypress/integration/plugins/ui/combobox.spec.js b/tests/cypress/integration/plugins/ui/combobox.spec.js
index 17a08a485..aa8137397 100644
--- a/tests/cypress/integration/plugins/ui/combobox.spec.js
+++ b/tests/cypress/integration/plugins/ui/combobox.spec.js
@@ -1666,3 +1666,144 @@ test('works with morph',
get('button').should(haveText('Select Framework (updated)'))
},
)
+
+test('boolean option values',
+ [html`
+
+ `],
+ ({ get }) => {
+ get('ul').should(notBeVisible())
+ get('p').should(haveText(''))
+ get('button')
+ .should(haveText('Select boolean'))
+ .click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-true"]').click()
+ get('ul').should(notBeVisible())
+ get('p').should(haveText('true'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(haveClasses(['selected']))
+ get('[option="boolean-false"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').click()
+ get('ul').should(notBeVisible())
+ get('p').should(haveText('false'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').should(haveClasses(['selected']))
+ },
+)
+
+test('integer option values',
+ [html`
+
+
+
+
+
+
+ -
+ 0
+
+ -
+ 1
+
+ -
+ 2
+
+
+
+
+ Selected:
+
+ `],
+ ({ get }) => {
+ get('ul').should(notBeVisible())
+ get('p').should(haveText(''))
+ get('button')
+ .should(haveText('Select number'))
+ .click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').click()
+ get('ul').should(notBeVisible())
+ get('p').should(haveText('1'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(haveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="0"]').click()
+ get('ul').should(notBeVisible())
+ get('p').should(haveText('0'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(haveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').click()
+ get('ul').should(notBeVisible())
+ get('p').should(haveText('2'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(haveClasses(['selected']))
+ },
+)
diff --git a/tests/cypress/integration/plugins/ui/listbox.spec.js b/tests/cypress/integration/plugins/ui/listbox.spec.js
index d9f8de452..6c2298918 100644
--- a/tests/cypress/integration/plugins/ui/listbox.spec.js
+++ b/tests/cypress/integration/plugins/ui/listbox.spec.js
@@ -957,4 +957,138 @@ test('works with morph',
},
)
+
+test('boolean option values',
+ [html`
+
+ `],
+ ({ get }) => {
+ get('ul').should(notBeVisible())
+ get('button')
+ .should(haveText('Select boolean'))
+ .click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-true"]').click()
+ get('ul').should(notBeVisible())
+ get('button').should(haveText('true'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(haveClasses(['selected']))
+ get('[option="boolean-false"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').click()
+ get('ul').should(notBeVisible())
+ get('button').should(haveText('false'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="boolean-true"]').should(notHaveClasses(['selected']))
+ get('[option="boolean-false"]').should(haveClasses(['selected']))
+ },
+)
+
+test('integer option values',
+ [html`
+
+
+
+
+
+
+ -
+ 0
+
+ -
+ 1
+
+ -
+ 2
+
+
+
+ `],
+ ({ get }) => {
+ get('ul').should(notBeVisible())
+ get('button')
+ .should(haveText('Select number'))
+ .click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').click()
+ get('ul').should(notBeVisible())
+ get('button').should(haveText('1'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(haveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="0"]').click()
+ get('ul').should(notBeVisible())
+ get('button').should(haveText('0'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(haveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').click()
+ get('ul').should(notBeVisible())
+ get('button').should(haveText('2'))
+ get('button').click()
+ get('ul').should(beVisible())
+ get('[option="0"]').should(notHaveClasses(['selected']))
+ get('[option="1"]').should(notHaveClasses(['selected']))
+ get('[option="2"]').should(haveClasses(['selected']))
+ },
+)
+
// test "by" attribute