diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts index b3830f75a1..d427fe5ad5 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts @@ -146,21 +146,23 @@ describe(`sbb-autocomplete-grid`, () => { }); it('select by mouse', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen); const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen); const optionSelectedEventSpy = new EventSpy( SbbAutocompleteGridOptionElement.events.optionSelected, ); + const optTwo = element.querySelector('#option-2')!; input.focus(); - await willOpenEventSpy.calledOnce(); - expect(willOpenEventSpy.count).to.be.equal(1); await didOpenEventSpy.calledOnce(); - expect(didOpenEventSpy.count).to.be.equal(1); - - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); + const positionRect = optTwo.getBoundingClientRect(); + + await sendMouse({ + type: 'click', + position: [ + Math.round(positionRect.x + window.scrollX + positionRect.width / 2), + Math.round(positionRect.y + window.scrollY + positionRect.height / 2), + ], + }); await waitForLitRender(element); expect(optionSelectedEventSpy.count).to.be.equal(1); @@ -244,6 +246,8 @@ describe(`sbb-autocomplete-grid`, () => { ); const optOne = element.querySelector('#option-1'); const optTwo = element.querySelector('#option-2'); + const keydownSpy = new EventSpy('keydown', input); + input.focus(); await didOpenEventSpy.calledOnce(); @@ -261,6 +265,7 @@ describe(`sbb-autocomplete-grid`, () => { await sendKeys({ press: 'Enter' }); await didCloseEventSpy.calledOnce(); expect(didCloseEventSpy.count).to.be.equal(1); + expect(keydownSpy.lastEvent?.defaultPrevented).to.be.true; expect(optTwo).not.to.have.attribute('data-active'); expect(optTwo).to.have.attribute('selected'); diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts index f29752cb01..249bc26c8f 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts @@ -96,7 +96,7 @@ class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement { break; case 'Enter': - this.selectByKeyboard(); + this.selectByKeyboard(event); break; case 'ArrowDown': @@ -118,7 +118,9 @@ class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement { * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]` * would always return a `SbbAutocompleteGridButtonElement`. */ - protected selectByKeyboard(): void { + protected selectByKeyboard(event: KeyboardEvent): void { + event.preventDefault(); + if (this._activeColumnIndex !== 0) { ( this._row[this._activeItemIndex].querySelectorAll( diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts index 2dbb837143..5bc0f17cf6 100644 --- a/src/elements/autocomplete/autocomplete.spec.ts +++ b/src/elements/autocomplete/autocomplete.spec.ts @@ -116,21 +116,28 @@ describe(`sbb-autocomplete`, () => { }); it('select by mouse', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen); const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); + const inputEventSpy = new EventSpy('input', input); + const changeEventSpy = new EventSpy('change', input); + const optTwo = element.querySelector('#option-2')!; input.focus(); - await willOpenEventSpy.calledOnce(); - expect(willOpenEventSpy.count).to.be.equal(1); await didOpenEventSpy.calledOnce(); - expect(didOpenEventSpy.count).to.be.equal(1); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'ArrowDown' }); - await sendKeys({ press: 'Enter' }); + const positionRect = optTwo.getBoundingClientRect(); + + await sendMouse({ + type: 'click', + position: [ + Math.round(positionRect.x + window.scrollX + positionRect.width / 2), + Math.round(positionRect.y + window.scrollY + positionRect.height / 2), + ], + }); await waitForLitRender(element); + expect(inputEventSpy.count).to.be.equal(1); + expect(changeEventSpy.count).to.be.equal(1); expect(optionSelectedEventSpy.count).to.be.equal(1); expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2'); }); @@ -139,8 +146,12 @@ describe(`sbb-autocomplete`, () => { const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose); const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); + const inputEventSpy = new EventSpy('input', input); + const changeEventSpy = new EventSpy('change', input); const optOne = element.querySelector('#option-1'); const optTwo = element.querySelector('#option-2'); + const keydownSpy = new EventSpy('keydown', input); + input.focus(); await didOpenEventSpy.calledOnce(); @@ -158,9 +169,12 @@ describe(`sbb-autocomplete`, () => { await sendKeys({ press: 'Enter' }); await didCloseEventSpy.calledOnce(); expect(didCloseEventSpy.count).to.be.equal(1); + expect(keydownSpy.lastEvent?.defaultPrevented).to.be.true; expect(optTwo).not.to.have.attribute('data-active'); expect(optTwo).to.have.attribute('selected'); + expect(inputEventSpy.count).to.be.equal(1); + expect(changeEventSpy.count).to.be.equal(1); expect(optionSelectedEventSpy.count).to.be.equal(1); expect(input).to.have.attribute('aria-expanded', 'false'); expect(input).not.to.have.attribute('aria-activedescendant'); diff --git a/src/elements/autocomplete/autocomplete.ts b/src/elements/autocomplete/autocomplete.ts index 8dc515d30e..696790057c 100644 --- a/src/elements/autocomplete/autocomplete.ts +++ b/src/elements/autocomplete/autocomplete.ts @@ -82,7 +82,7 @@ class SbbAutocompleteElement extends SbbAutocompleteBaseElement { break; case 'Enter': - this.selectByKeyboard(); + this.selectByKeyboard(event); break; case 'ArrowDown': @@ -92,7 +92,8 @@ class SbbAutocompleteElement extends SbbAutocompleteBaseElement { } } - protected selectByKeyboard(): void { + protected selectByKeyboard(event: KeyboardEvent): void { + event.preventDefault(); const activeOption = this.options[this._activeItemIndex]; if (activeOption) {