fix: Check availability of config form before setting focus (#12342)

When the focus was set on previous/next navigation, the interactive configuration form was sometimes already teared down. This led to an error message in the console Closes #12341
SAP · May 10, 2021 · 7d54810 · 7d54810
1 parent fa49838
commit 7d54810
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/...t-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts b/...t-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts
@@ -30,6 +30,7 @@ describe('ConfigUtilsService', () => {
     'testProduct'
   );
   let keyboardFocusService: KeyboardFocusService;
+  let querySelectorOriginal: any;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -48,6 +49,11 @@ describe('ConfigUtilsService', () => {
     keyboardFocusService = TestBed.inject(
       KeyboardFocusService as Type<KeyboardFocusService>
     );
+    querySelectorOriginal = document.querySelector;
+  });
+
+  afterEach(() => {
+    document.querySelector = querySelectorOriginal;
   });
 
   it('should be created', () => {
@@ -117,24 +123,30 @@ describe('ConfigUtilsService', () => {
   });
 
   describe('focusFirstAttribute', () => {
-    it('should return no focused attribute because keyboardFocusService is undefined', () => {
+    it('should not delegate to keyboardFocusService if we did not provide that', () => {
       classUnderTest['keyboardFocusService'] = undefined;
       spyOn(keyboardFocusService, 'findFocusable').and.stub();
       classUnderTest.focusFirstAttribute();
       expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0);
     });
 
-    it('should return no focused attribute because keyboardFocusService is null', () => {
-      classUnderTest['keyboardFocusService'] = null;
-      spyOn(keyboardFocusService, 'findFocusable').and.stub();
+    it('should delegate to focus service', () => {
+      const theElement = document.createElement('form');
+      document.querySelector = jasmine
+        .createSpy('HTML Element')
+        .and.returnValue(theElement);
+      spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]);
       classUnderTest.focusFirstAttribute();
-      expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0);
+      expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(1);
     });
 
-    it('should return no focused attribute because there is no found', () => {
+    it('should not delegate to focus service if form is not available', () => {
+      document.querySelector = jasmine
+        .createSpy('HTML Element')
+        .and.returnValue(null);
       spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]);
       classUnderTest.focusFirstAttribute();
-      expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(1);
+      expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0);
     });
   });
 });
diff --git a/...roduct-configurator/rulebased/components/service/configurator-storefront-utils.service.ts b/...roduct-configurator/rulebased/components/service/configurator-storefront-utils.service.ts
@@ -116,14 +116,16 @@ export class ConfiguratorStorefrontUtilsService {
   focusFirstAttribute(): void {
     if (this.keyboardFocusService) {
       if (isPlatformBrowser(this.platformId)) {
-        const form: HTMLElement = document.querySelector(
+        const form: HTMLElement | null = document.querySelector(
           'cx-configurator-form'
         );
-        const focusedElements: HTMLElement[] = this.keyboardFocusService.findFocusable(
-          form
-        );
-        if (focusedElements && focusedElements.length > 1) {
-          focusedElements[0]?.focus();
+        if (form) {
+          const focusableElements: HTMLElement[] = this.keyboardFocusService.findFocusable(
+            form
+          );
+          if (focusableElements && focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
         }
       }
     }