ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(combobox): do not submit form if overlay of combobox is opened and ENTER is hit (#2481)

Browse source
This commit is contained in:
gerjanvangeest 2025-04-08 15:07:42 +02:00 committed by GitHub
parent 95b70d32c8
commit 23cd9841ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 57 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/witty-oranges-lick.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[combobox] do not submit form if overlay of combobox is opened and ENTER is hit

4
packages/ui/components/combobox/src/LionCombobox.js
View file

@ -1134,7 +1134,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
} }
break; break;
case 'Enter': case 'Enter':
if (this.multipleChoice && this.opened) { if (this.opened) {
ev.preventDefault(); ev.preventDefault();
} }
@ -1145,8 +1145,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
this.formElements[this.activeIndex].hasAttribute('aria-hidden') || this.formElements[this.activeIndex].hasAttribute('aria-hidden') ||
!this.opened) !this.opened)
) { ) {
ev.preventDefault();
this.modelValue = this.parser([...this.modelValue, this._inputNode.value]); this.modelValue = this.parser([...this.modelValue, this._inputNode.value]);
this._inputNode.value = ''; this._inputNode.value = '';
this.opened = false; this.opened = false;

51
packages/ui/components/combobox/test/lion-combobox.test.js
View file

@ -985,6 +985,57 @@ describe('lion-combobox', () => {
await el.updateComplete; await el.updateComplete;
expect(el.modelValue).to.eql(['Art']); 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`
<form @submit=${submitSpy}>
<lion-combobox name="foo">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</lion-combobox>
<button type="submit">submit</button>
</form>
`)
);
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`
<form @submit=${submitSpy}>
<lion-combobox name="foo">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</lion-combobox>
<button type="submit">submit</button>
</form>
`)
);
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', () => { describe('Overlay visibility', () => {