From 5421d646ab5157e10861b29f98eabfc0cdb7f907 Mon Sep 17 00:00:00 2001
From: Max Skanvik <179694889+max-umain@users.noreply.github.com>
Date: Tue, 21 Jan 2025 14:00:32 +0100
Subject: [PATCH] fix(header): emit event from header-dropdown-list-item

---
 .../header-dropdown-list-item.tsx             |  6 +++++-
 .../header-dropdown-list-item/readme.md       |  7 +++++++
 .../header-dropdown/header-dropdown.tsx       | 19 +++++--------------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/components/header/header-dropdown-list-item/header-dropdown-list-item.tsx b/packages/core/src/components/header/header-dropdown-list-item/header-dropdown-list-item.tsx
index 385042ee2..302f36fe5 100644
--- a/packages/core/src/components/header/header-dropdown-list-item/header-dropdown-list-item.tsx
+++ b/packages/core/src/components/header/header-dropdown-list-item/header-dropdown-list-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop, Event, EventEmitter } from '@stencil/core';
 
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
@@ -11,6 +11,8 @@ import { Component, Element, h, Host, Prop } from '@stencil/core';
 export class TdsHeaderDropdownListItem {
   @Element() host: HTMLElement;
 
+  @Event() closeDropdownFromListItem: EventEmitter<void>;
+
   /** If the link should appear selected. */
   @Prop() selected: boolean = false;
 
@@ -25,6 +27,8 @@ export class TdsHeaderDropdownListItem {
             'component': true,
             'component-selected': this.selected,
           }}
+          onClick={() => this.closeDropdownFromListItem.emit()}
+          onKeyDown={(e) => e.key === 'Enter' && this.closeDropdownFromListItem.emit()}
         >
           <slot></slot>
         </div>
diff --git a/packages/core/src/components/header/header-dropdown-list-item/readme.md b/packages/core/src/components/header/header-dropdown-list-item/readme.md
index 648844abc..4d13f1a8d 100644
--- a/packages/core/src/components/header/header-dropdown-list-item/readme.md
+++ b/packages/core/src/components/header/header-dropdown-list-item/readme.md
@@ -13,6 +13,13 @@
 | `size`     | `size`     | The size of the component.          | `"lg" \| "md"` | `'md'`  |
 
 
+## Events
+
+| Event                       | Description | Type                |
+| --------------------------- | ----------- | ------------------- |
+| `closeDropdownFromListItem` |             | `CustomEvent<void>` |
+
+
 ## Slots
 
 | Slot          | Description                                        |
diff --git a/packages/core/src/components/header/header-dropdown/header-dropdown.tsx b/packages/core/src/components/header/header-dropdown/header-dropdown.tsx
index c2f1dc6da..6978f1769 100644
--- a/packages/core/src/components/header/header-dropdown/header-dropdown.tsx
+++ b/packages/core/src/components/header/header-dropdown/header-dropdown.tsx
@@ -43,12 +43,10 @@ export class TdsHeaderDropdown {
     this.open = !this.open;
   }
 
-  handleSlottedItemClick = (event: MouseEvent | KeyboardEvent) => {
-    const eventSource = (event.target as HTMLElement).tagName.toLowerCase();
-    if (['a', 'button', 'div'].includes(eventSource)) {
-      this.open = false;
-    }
-  };
+  @Listen('closeDropdownFromListItem')
+  handleCloseDropdownFromListItem() {
+    this.open = false;
+  }
 
   render() {
     return (
@@ -95,14 +93,7 @@ export class TdsHeaderDropdown {
                 },
               ]}
             >
-              {this.open ? (
-                <span
-                  onClick={(e) => this.handleSlottedItemClick(e)}
-                  onKeyDown={(e) => e.key === 'Enter' && this.handleSlottedItemClick(e)}
-                >
-                  <slot></slot>
-                </span>
-              ) : null}
+              {this.open ? <slot></slot> : null}
             </tds-popover-canvas>
           )}
         </div>