From d4596af52b9e3153e5ae3197483478239ad89153 Mon Sep 17 00:00:00 2001
From: steinsebastian <54309425+steinsebastian@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:28:26 +0200
Subject: [PATCH] fix: clear persisted focus on entering configuration (#19413)

---
 .../form/configurator-form.component.spec.ts       | 14 ++++++++++++++
 .../components/form/configurator-form.component.ts | 11 ++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts
index d1bb77eaa51..37efa156106 100644
--- a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts
+++ b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.spec.ts
@@ -31,6 +31,7 @@ import { productConfiguration } from '../../testing/configurator-test-data';
 import { ConfiguratorTestUtils } from '../../testing/configurator-test-utils';
 import { ConfiguratorAttributeHeaderComponent } from '../attribute/header/configurator-attribute-header.component';
 import { ConfiguratorFormComponent } from './configurator-form.component';
+import { KeyboardFocusService } from '@spartacus/storefront';
 
 @Component({
   selector: 'cx-configurator-group',
@@ -258,6 +259,7 @@ let component: ConfiguratorFormComponent;
 let htmlElem: HTMLElement;
 let configExpertModeService: ConfiguratorExpertModeService;
 let hasConfigurationConflictsObservable: Observable<boolean> = EMPTY;
+let keyboardFocusService: KeyboardFocusService;
 
 describe('ConfigurationFormComponent', () => {
   beforeEach(waitForAsync(() => {
@@ -347,6 +349,10 @@ describe('ConfigurationFormComponent', () => {
       LaunchDialogService as Type<LaunchDialogService>
     );
     spyOn(launchDialogService, 'openDialogAndSubscribe').and.callThrough();
+    keyboardFocusService = TestBed.inject(
+      KeyboardFocusService as Type<KeyboardFocusService>
+    );
+    spyOn(keyboardFocusService, 'clear').and.callThrough();
   });
 
   describe('resolve issues navigation', () => {
@@ -421,6 +427,14 @@ describe('ConfigurationFormComponent', () => {
     });
   });
 
+  it('should reset persisted focus when UI is opened without resolve issue mode', () => {
+    routerStateObservable = mockRouterStateWithQueryParams({
+      resolveIssues: 'false',
+    });
+    createComponentWithData();
+    expect(keyboardFocusService.clear).toHaveBeenCalledTimes(1);
+  });
+
   describe('Rendering', () => {
     it('should render ghost view if no data is present', () => {
       createComponentWithoutData();
diff --git a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts
index 580b92349af..fbc0a2a2ee6 100644
--- a/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts
+++ b/feature-libs/product-configurator/rulebased/components/form/configurator-form.component.ts
@@ -9,13 +9,18 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core';
 import { GlobalMessageService, GlobalMessageType } from '@spartacus/core';
 import {
   ConfiguratorRouter,
   ConfiguratorRouterExtractorService,
 } from '@spartacus/product-configurator/common';
-import { LAUNCH_CALLER, LaunchDialogService } from '@spartacus/storefront';
+import {
+  LAUNCH_CALLER,
+  LaunchDialogService,
+  KeyboardFocusService,
+} from '@spartacus/storefront';
 import { Observable, Subscription } from 'rxjs';
 import {
   delay,
@@ -38,6 +43,7 @@ import { ConfiguratorExpertModeService } from '../../core/services/configurator-
 export class ConfiguratorFormComponent implements OnInit, OnDestroy {
   protected subscription = new Subscription();
 
+  protected keyboardFocusService = inject(KeyboardFocusService);
   routerData$: Observable<ConfiguratorRouter.Data> =
     this.configRouterExtractorService.extractRouterData();
 
@@ -157,6 +163,9 @@ export class ConfiguratorFormComponent implements OnInit, OnDestroy {
               );
             }
           });
+      } else {
+        // Clear persisted focus before entering the configurator UI
+        this.keyboardFocusService.clear();
       }
 
       if (routingData.expMode) {