DropdownToggle with children does not close when toggle is clicked

[FoodProduct]

• components: DropdownToggle
• reactstrap version #9.1.5
• import method es
• react version #18.2.0, #16.14.0
• bootstrap version #5.2.3

What is happening?

Clicking a <DropdownToggle> with non-string children on an open Dropdown triggers toggle() twice, which prevents the dropdown from closing.

What should be happening?

Clicking the dropdown toggle should close the dropdown.

Steps to reproduce issue

https://github.com/FoodProduct/bootstrap-dropdown-component

1. Have a <DropdownToggle> whose children are not a simple string (e.g.<div>Click me</div>)
2. Open the dropdown
3. Click the dropdown toggle

Error message in console

N/A

Code

https://stackblitz.com/edit/reactstrap-vcxbgg?file=Example.js

This is because the document click event handler does not recognize the click event on the toggle properly, causing an extra trigger, i.e. the following check fails:

reactstrap/src/Dropdown.js

Line 101 in 75a4ab3

const targetIsToggle = e.target === toggle;

[rabarrota]

Any update on this?

[FoodProduct]

Any update on this?

@illiteratewriter graciously opened a PR with the fix in December, but unfortunately it does not seem to have been reviewed yet 😞