diff --git a/.changeset/witty-oranges-lick.md b/.changeset/witty-oranges-lick.md new file mode 100644 index 000000000..808282a16 --- /dev/null +++ b/.changeset/witty-oranges-lick.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[combobox] do not submit form if overlay of combobox is opened and ENTER is hit diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js index 744e2e106..d62486eac 100644 --- a/packages/ui/components/combobox/src/LionCombobox.js +++ b/packages/ui/components/combobox/src/LionCombobox.js @@ -1134,7 +1134,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi } break; case 'Enter': - if (this.multipleChoice && this.opened) { + if (this.opened) { ev.preventDefault(); } @@ -1145,8 +1145,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi this.formElements[this.activeIndex].hasAttribute('aria-hidden') || !this.opened) ) { - ev.preventDefault(); - this.modelValue = this.parser([...this.modelValue, this._inputNode.value]); this._inputNode.value = ''; this.opened = false; diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js index 0a31c0892..dac814cb1 100644 --- a/packages/ui/components/combobox/test/lion-combobox.test.js +++ b/packages/ui/components/combobox/test/lion-combobox.test.js @@ -985,6 +985,57 @@ describe('lion-combobox', () => { await el.updateComplete; expect(el.modelValue).to.eql(['Art']); }); + + it('submits form on [Enter] when listbox is closed', async () => { + const submitSpy = sinon.spy(e => e.preventDefault()); + const el = /** @type {HTMLFormElement} */ ( + await fixture(html` +
+ `) + ); + const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]')); + const { _inputNode } = getComboboxMembers(combobox); + await combobox.updateComplete; + _inputNode.focus(); + await sendKeys({ + press: 'Enter', + }); + expect(submitSpy.callCount).to.equal(1); + }); + + it('does not submit form on [Enter] when listbox is opened', async () => { + const submitSpy = sinon.spy(e => e.preventDefault()); + const el = /** @type {HTMLFormElement} */ ( + await fixture(html` + + `) + ); + const combobox = /** @type {LionCombobox} */ (el.querySelector('[name="foo"]')); + const { _inputNode } = getComboboxMembers(combobox); + combobox.opened = true; + await combobox.updateComplete; + _inputNode.focus(); + await sendKeys({ + press: 'Enter', + }); + expect(submitSpy.callCount).to.equal(0); + }); }); describe('Overlay visibility', () => {