From 800a24c4ea45880c18cd8b003aeb9af42eeca9fd Mon Sep 17 00:00:00 2001
From: abugraokkali <abugraokkali@outlook.com>
Date: Tue, 18 Apr 2023 00:11:54 +0300
Subject: [PATCH] feat(dropdown): close when an item is clicked

---
 src/components/dropdown/bl-dropdown.test.ts   | 26 +++++++++++++++++++
 .../dropdown/item/bl-dropdown-item.ts         |  1 +
 2 files changed, 27 insertions(+)

diff --git a/src/components/dropdown/bl-dropdown.test.ts b/src/components/dropdown/bl-dropdown.test.ts
index 9cd4a24d..8c4a7510 100644
--- a/src/components/dropdown/bl-dropdown.test.ts
+++ b/src/components/dropdown/bl-dropdown.test.ts
@@ -91,6 +91,32 @@ describe('bl-dropdown', () => {
     });
   });
 
+  it('should close dropdown when click dropdown item', async () => {
+    const el = await fixture<typeOfBlDropdown>(html`
+      <bl-dropdown>
+        <bl-dropdown-item>dropdown-item</bl-dropdown-item>
+      </bl-dropdown>
+    `);
+
+    const buttonHost = <BlButton>el.shadowRoot?.querySelector('bl-button');
+    const button = buttonHost.shadowRoot?.querySelector('.button') as HTMLElement | null;
+    const popover = <BlPopover>el.shadowRoot?.querySelector('bl-popover');
+
+    button?.click();
+    expect(el.opened).to.true;
+    expect(popover.visible).to.true;
+
+    const item = el
+      .querySelector('bl-dropdown-item')
+      ?.shadowRoot?.querySelector('bl-button') as HTMLElement | null;
+    item?.click();
+
+    setTimeout(() => {
+      expect(el.opened).to.false;
+      expect(popover.visible).to.false;
+    });
+  });
+
   it('should fire event when dropdown opened', async () => {
     const el = await fixture<typeOfBlDropdown>(html`<bl-dropdown></bl-dropdown>`);
 
diff --git a/src/components/dropdown/item/bl-dropdown-item.ts b/src/components/dropdown/item/bl-dropdown-item.ts
index 3de13617..acec9277 100644
--- a/src/components/dropdown/item/bl-dropdown-item.ts
+++ b/src/components/dropdown/item/bl-dropdown-item.ts
@@ -35,6 +35,7 @@ export default class BlDropdownItem extends LitElement {
   @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;
 
   private _handleClick() {
+    this.BlDropdownField?.close();
     this.onClick('Action clicked!');
   }