From affbb885480260fd5e9cd5aaf7e0f7e53cedbc2a Mon Sep 17 00:00:00 2001
From: PioBar <72926984+Pio-Bar@users.noreply.github.com>
Date: Mon, 18 Mar 2024 15:37:30 +0100
Subject: [PATCH] fix: (CXSPA-965) - Refocus on input after quick order with
 keyboard (#18313)

Co-authored-by: Piotr Bartkowiak <pbartkowiak@divante.pl>
---
 .../quick-order/form/quick-order-form.component.html      | 1 +
 .../quick-order/form/quick-order-form.component.ts        | 5 +++++
 .../b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts  | 1 +
 .../cypress/helpers/b2b/b2b-quick-order.ts                | 8 ++++++--
 4 files changed, 13 insertions(+), 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
index efd0656419a..cd3515681e0 100644
--- 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
index d80b6b83cd9..7ecce927213 100644
--- 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/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts
index 1721dc9c297..e376d55efd5 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/b2b/regression/quick-order/b2b-quick-order.e2e.cy.ts
+++ b/projects/storefrontapp-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
index cb68684a517..ae0f012b669 100644
--- 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');
+}