From fa1fcc84511582f5e22d42c73c2ff1bb8c805f9b Mon Sep 17 00:00:00 2001
From: illiteratewriter <manukoshyabraham@gmail.com>
Date: Fri, 3 Mar 2023 00:29:47 +0530
Subject: [PATCH] fix(#2660): dropdown closes for complex children (#2673)

* fix(#2660): dropdown closes for complex children

- fix issue where if children of dropdown toggle where not simple
strings the dropdown would remain open

* test: add test for Dropdown
---
 src/Dropdown.js                |  2 +-
 src/__tests__/Dropdown.spec.js | 51 ++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/Dropdown.js b/src/Dropdown.js
index 642f7ea95..911ff14bf 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -98,7 +98,7 @@ class Dropdown extends React.Component {
     const menu = this.getMenu();
     const toggle = this.getToggle();
 
-    const targetIsToggle = e.target === toggle;
+    const targetIsToggle = toggle.contains(e.target);
     const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
 
     let clickIsInInput = false;
diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js
index ef6c890db..aa2d4fe0d 100644
--- a/src/__tests__/Dropdown.spec.js
+++ b/src/__tests__/Dropdown.spec.js
@@ -88,6 +88,38 @@ describe('Dropdown', () => {
     expect(toggle).not.toHaveBeenCalled();
   });
 
+  it('should call toggle when DropdownToggle is clicked ', () => {
+    const toggle = jest.fn();
+    render(
+      <Dropdown isOpen toggle={toggle}>
+        <DropdownToggle>Toggle</DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    user.click(screen.getByText(/toggle/i));
+    expect(toggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call toggle when DropdownToggle with non string children is clicked ', () => {
+    const toggle = jest.fn();
+    render(
+      <Dropdown isOpen toggle={toggle}>
+        <DropdownToggle>
+          <div>Toggle</div>
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    user.click(screen.getByText(/toggle/i));
+    expect(toggle).toHaveBeenCalledTimes(1);
+  });
+
   describe('handleProps', () => {
     it('should not pass custom props to html attrs', () => {
       const toggle = jest.fn();
@@ -213,6 +245,25 @@ describe('Dropdown', () => {
       expect(toggle).toHaveBeenCalled();
     });
 
+    it('should call toggle on container click', () => {
+      const toggle = jest.fn();
+
+      render(
+        <Dropdown isOpen toggle={toggle} data-testid="dropdown">
+          <DropdownToggle>
+            <div>Toggle</div>
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem>Test</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
+
+      user.click(screen.getByTestId('dropdown'));
+
+      expect(toggle).toHaveBeenCalled();
+    });
+
     it('should not call toggle on inner container click', () => {
       const toggle = jest.fn();
       render(