🐛 it should be possible to open a listbox without submitting the form

GavinJoyce · Nov 5, 2021 · d14513a · d14513a
1 parent 855f9e6
commit d14513a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/addon/components/listbox/-button.hbs b/addon/components/listbox/-button.hbs
@@ -1,6 +1,7 @@
 {{#let (element (or @as 'button')) as |Tag|}}
   <Tag
     role={{if @role @role 'button'}}
+    type={{if @type @type 'button'}}
     id='{{@guid}}-button'
     aria-haspopup='listbox'
     aria-controls={{@guid}}

diff --git a/tests/integration/components/listbox-test.js b/tests/integration/components/listbox-test.js
@@ -3382,4 +3382,33 @@ module('Integration | Component | <Listbox>', function (hooks) {
       assertNoActiveListboxOption();
     });
   });
+
+  test('should be possible to open a listbox without submitting the form', async function (assert) {
+    let callCount = 0;
+
+    this.set('onSubmit', () => {
+      callCount++;
+    });
+
+    await render(hbs`
+      <form {{on 'submit' this.onSubmit}}>
+        <Listbox as |listbox|>
+          <listbox.Button>Trigger</listbox.Button>
+          <listbox.Options as |options|>
+            <options.Option>option</options.Option>
+          </listbox.Options>
+        </Listbox>
+      </form>
+    `);
+    assertListboxButton({
+      state: ListboxState.InvisibleUnmounted,
+    });
+    assertListbox({
+      state: ListboxState.InvisibleUnmounted,
+    });
+    await click(getListboxButton());
+    assertListbox({ state: ListboxState.Visible });
+
+    assert.equal(callCount, 0, 'onSubmit not called');
+  });
 });