fix(header): emit event from header-dropdown-list-item

scania-digital-design-system · Jan 21, 2025 · 65ad727 · 65ad727
1 parent c2adb3a
commit 65ad727
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 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
@@ -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,7 @@ export class TdsHeaderDropdownListItem {
             'component': true,
             'component-selected': this.selected,
           }}
+          onClick={() => 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
@@ -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
@@ -45,11 +45,16 @@ export class TdsHeaderDropdown {
 
   handleSlottedItemClick = (event: MouseEvent | KeyboardEvent) => {
     const eventSource = (event.target as HTMLElement).tagName.toLowerCase();
-    if (['a', 'button', 'div'].includes(eventSource)) {
+    if (['a', 'button'].includes(eventSource)) {
       this.open = false;
     }
   };
 
+  @Listen('closeDropdownFromListItem')
+  handleCloseDropdownFromListItem() {
+    this.open = false;
+  }
+
   render() {
     return (
       <Host>
@@ -96,10 +101,7 @@ export class TdsHeaderDropdown {
               ]}
             >
               {this.open ? (
-                <span
-                  onClick={(e) => this.handleSlottedItemClick(e)}
-                  onKeyDown={(e) => e.key === 'Enter' && this.handleSlottedItemClick(e)}
-                >
+                <span onKeyDown={(e) => e.key === 'Enter' && this.handleSlottedItemClick(e)}>
                   <slot></slot>
                 </span>
               ) : null}