fix(core): get proper closest parent element

SAP · Jun 4, 2021 · 7f1a8ac · 7f1a8ac
1 parent b66a43f
commit 7f1a8ac
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/...c/lib/quick-view/quick-view-group-item-content/quick-view-group-item-content.component.ts b/...c/lib/quick-view/quick-view-group-item-content/quick-view-group-item-content.component.ts
@@ -1,6 +1,7 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
 
 import { QuickViewGroupItemContentElementDirective } from './quick-view-group-item-content-element.directive';
+import { getClosest } from '@fundamental-ngx/core/utils';
 
 @Component({
     selector: 'fd-quick-view-group-item-content',
@@ -19,11 +20,11 @@ export class QuickViewGroupItemContentComponent implements AfterViewInit {
     /** @hidden
      * Needed for binding the id of the element and id of the proper label to aria-labelledby. */
     private _bindElementAttributes(): void {
-        const parentId = this._elRef.nativeElement?.parentElement?.id;
+        const parentId = getClosest('.fd-form-item', this._elRef.nativeElement)?.id;
         const id = `${parentId}-content`;
 
         const element = this._elRef.nativeElement.querySelector(`.${QuickViewGroupItemContentElementDirective.class}`);
-        if (element) {
+        if (element && parentId) {
             element.setAttribute('id', id);
             element.setAttribute('aria-labelledby', `${parentId}-label ${id}`);
         }

diff --git a/...e/src/lib/quick-view/quick-view-group-item-label/quick-view-group-item-label.component.ts b/...e/src/lib/quick-view/quick-view-group-item-label/quick-view-group-item-label.component.ts
@@ -1,4 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
+import { getClosest } from '@fundamental-ngx/core/utils';
 
 @Component({
     selector: 'fd-quick-view-group-item-label',
@@ -17,9 +18,9 @@ export class QuickViewGroupItemLabelComponent implements AfterViewInit {
     /** @hidden
      * Needed for binding the id to the label element (and this id needed for aria-labelledby of proper element). */
     private _bindElementAttributes(): void {
-        const parentId = this._elRef.nativeElement?.parentElement?.id;
+        const parentId = getClosest('.fd-form-item', this._elRef.nativeElement)?.id;
 
-        if (this._elRef.nativeElement.firstChild) {
+        if (this._elRef.nativeElement.firstChild && parentId) {
             this._elRef.nativeElement.firstChild.setAttribute('id', `${parentId}-label`);
         }
     }

diff --git a/libs/core/src/lib/utils/functions/closest-element.ts b/libs/core/src/lib/utils/functions/closest-element.ts
@@ -23,3 +23,20 @@ export function closestElement(selector, element): Element | null {
 
     return element;
 }
+
+/** Alternative way to get closes element. */
+export function getClosest(selector, elem): Element | null {
+    // .matches polyfill
+    if (!Element.prototype.matches) {
+        /** @ts-ignore */
+        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    }
+
+    // get the closest matching element
+    for ( ; elem && elem !== document; elem = elem.parentNode) {
+        if (elem.matches(selector)) {
+            return elem;
+        }
+    }
+    return null;
+}