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 = EMPTY; +let keyboardFocusService: KeyboardFocusService; describe('ConfigurationFormComponent', () => { beforeEach(waitForAsync(() => { @@ -347,6 +349,10 @@ describe('ConfigurationFormComponent', () => { LaunchDialogService as Type ); spyOn(launchDialogService, 'openDialogAndSubscribe').and.callThrough(); + keyboardFocusService = TestBed.inject( + KeyboardFocusService as Type + ); + 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..fdf2cd04ac9 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,6 +9,7 @@ import { Component, OnDestroy, OnInit, + inject, } from '@angular/core'; import { GlobalMessageService, GlobalMessageType } from '@spartacus/core'; import { @@ -29,6 +30,7 @@ import { ConfiguratorCommonsService } from '../../core/facade/configurator-commo import { ConfiguratorGroupsService } from '../../core/facade/configurator-groups.service'; import { Configurator } from '../../core/model/configurator.model'; import { ConfiguratorExpertModeService } from '../../core/services/configurator-expert-mode.service'; +import { KeyboardFocusService } from '@spartacus/storefront'; @Component({ selector: 'cx-configurator-form', @@ -38,6 +40,7 @@ import { ConfiguratorExpertModeService } from '../../core/services/configurator- export class ConfiguratorFormComponent implements OnInit, OnDestroy { protected subscription = new Subscription(); + protected focusService = inject(KeyboardFocusService); routerData$: Observable = this.configRouterExtractorService.extractRouterData(); @@ -157,6 +160,9 @@ export class ConfiguratorFormComponent implements OnInit, OnDestroy { ); } }); + } else { + // Clear persisted focus before entering the configurator UI + this.focusService.clear(); } if (routingData.expMode) {