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
reactstrap · Mar 2, 2023 · fa1fcc8 · fa1fcc8
1 parent 827b98b
commit fa1fcc8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git 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
@@ -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(