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

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

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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>