fix(tab-header): unsafe querySelector (#1608)

telekom · Feb 24, 2023 · 82d0f14 · 82d0f14
1 parent ceac390
commit 82d0f14
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 24 deletions.
diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -175,7 +175,7 @@ export class Button {
    */
   setChildrenIconSize() {
     if (this.size != null && buttonIconSizeMap[this.size] != null) {
-      const icons: ScaleIcon[] = Array.from(this.hostElement.children).filter(
+      const icons: ScaleIcon[] = Array.from(this.hostElement.childNodes).filter(
         isScaleIcon
       );
       icons.forEach((icon) => {

diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx
@@ -14,7 +14,6 @@ import classNames from 'classnames';
 import { ScaleIcon, isScaleIcon } from '../../utils/utils';
 import statusNote from '../../utils/status-note';
 
-const DEFAULT_ICON_SIZE = 24;
 const PER_SPEC_ICON_SIZE = 16;
 
 let i = 0;
@@ -26,7 +25,6 @@ let i = 0;
 })
 export class TabHeader {
   generatedId: number = i++;
-  container: HTMLElement;
 
   @Element() hostElement: HTMLElement;
 
@@ -45,6 +43,9 @@ export class TabHeader {
 
   @Watch('selected')
   selectedChanged(newValue: boolean) {
+    if (!this.hostElement.isConnected) {
+      return;
+    }
     if (!this.disabled) {
       if (newValue === true) {
         // Having focus on the host element, and not on inner elements,
@@ -77,30 +78,23 @@ export class TabHeader {
    * Find slotted icons, and if any, add the `selected` attribute accordingly.
    */
   updateSlottedIcon() {
-    const slot = this.container.querySelector('slot') as HTMLSlotElement;
-    if (slot === null) {
-      return;
-    }
-    const children = Array.from(slot.assignedNodes())
-      .filter((node) => node.nodeType === 1)
-      .filter((node) => node.nodeName.toUpperCase().indexOf('ICON') > -1);
-    if (children.length === 0) {
-      return;
-    }
+    const icons: ScaleIcon[] = Array.from(this.hostElement.childNodes).filter(
+      isScaleIcon
+    );
     const action = this.selected ? 'setAttribute' : 'removeAttribute';
-    children.forEach((child) => child[action]('selected', ''));
+    icons.forEach((child) => child[action]('selected', ''));
   }
 
   /**
    * Set any children icon's size according the button size.
    */
   setChildrenIconSize() {
-    const icons: ScaleIcon[] = Array.from(this.hostElement.children).filter(
+    const icons: ScaleIcon[] = Array.from(this.hostElement.childNodes).filter(
       isScaleIcon
     );
     icons.forEach((icon) => {
       // This is meh people might actually want 24
-      if (icon.size === DEFAULT_ICON_SIZE) {
+      if (icon.size !== PER_SPEC_ICON_SIZE) {
         icon.size = PER_SPEC_ICON_SIZE;
       }
     });
@@ -117,12 +111,7 @@ export class TabHeader {
         onBlur={() => (this.hasFocus = false)}
       >
         {this.styles && <style>{this.styles}</style>}
-
-        <span
-          part={this.getBasePartMap()}
-          ref={(el) => (this.container = el)}
-          class={this.getCssClassMap()}
-        >
+        <span part={this.getBasePartMap()} class={this.getCssClassMap()}>
           <slot />
         </span>
       </Host>

diff --git a/packages/components/src/utils/utils.ts b/packages/components/src/utils/utils.ts
@@ -92,12 +92,12 @@ export function isClickOutside(event: MouseEvent, host: HTMLElement) {
   return true;
 }
 
-export interface ScaleIcon extends Element {
+export interface ScaleIcon extends Node {
   size?: number;
 }
 
 export const isScaleIcon = (el: Node) => {
-  if (el == null) {
+  if (el == null || el.nodeType !== 1) {
     return false;
   }
   return el.nodeName.toUpperCase().substring(0, 10) === 'SCALE-ICON';