fix: (CXSPA-965) - Refocus on input after quick order with keyboard (#…

…18313) Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Mar 18, 2024 · affbb88 · affbb88
1 parent 5aeedd7
commit affbb88
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.html b/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.html
@@ -20,6 +20,7 @@
       formControlName="product"
       placeholder="{{ 'quickOrderForm.placeholder' | cxTranslate }}"
       type="text"
+      #quickOrderInput
     />
 
     <button

diff --git a/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts b/feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts
@@ -8,9 +8,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   Input,
   OnDestroy,
   OnInit,
+  ViewChild,
 } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { QuickOrderFacade } from '@spartacus/cart/quick-order/root';
@@ -41,6 +43,8 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy {
 
   @Input() limit: number;
 
+  @ViewChild('quickOrderInput') quickOrderInput: ElementRef;
+
   protected subscription = new Subscription();
   protected searchSubscription = new Subscription();
 
@@ -99,6 +103,7 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy {
     }
 
     this.quickOrderService.addProduct(product);
+    this.quickOrderInput.nativeElement.focus();
   }
 
   addProduct(event: Event): void {

diff --git a/...torefrontapp-e2e-cypress/cypress/e2e/b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts b/...torefrontapp-e2e-cypress/cypress/e2e/b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts
@@ -193,6 +193,7 @@ context('B2B - Quick Order', () => {
       it('should conform to tabbing order for quick order page', () => {
         quickOrder.visitQuickOrderPage();
         quickOrder.addProductToTheList(sampleData.b2bProduct.code);
+        quickOrder.verifyInputHasFocus();
         quickOrder.verifyQuickOrderListQuantity(1);
         quickOrder.verifyQuickOrderPageTabbingOrder();
       });

diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/b2b-quick-order.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/b2b/b2b-quick-order.ts
@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { SampleProduct } from '../../sample-data/checkout-flow';
+import { tabbingOrderConfig as config } from '../../helpers/accessibility/b2b/tabbing-order.config';
 import * as sampleData from '../../sample-data/b2b-checkout';
+import { SampleProduct } from '../../sample-data/checkout-flow';
 import { verifyTabbingOrder as tabbingOrder } from '../accessibility/tabbing-order';
-import { tabbingOrderConfig as config } from '../../helpers/accessibility/b2b/tabbing-order.config';
 import { waitForPage } from '../checkout-flow';
 
 export const ADD_TO_CART_ENDPOINT_ALIAS = 'addEntry';
@@ -258,3 +258,7 @@ export function verifyCartPageTabbingOrder() {
 export function verifyQuickOrderPageTabbingOrder() {
   tabbingOrder('cx-quick-order', config.quickOrder);
 }
+
+export function verifyInputHasFocus() {
+  cy.get('.quick-order-form-input input').should('be.focused');
+}