fix(sbb-autocomplete, sbb-autocomplete-grid): avoid form submission o…

…n enter press (#3243) Closes #3239
sbb-design-systems · Nov 26, 2024 · fe5b0a9 · fe5b0a9
1 parent 8f94e6c
commit fe5b0a9
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 deletions.
diff --git 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<SbbAutocompleteGridOptionElement>('#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
@@ -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
@@ -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<SbbOptionElement>('#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
@@ -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) {