DropdownItem still not working

Issue description

• components: DropdownItem
• reactstrap version 5.0.0-alpha.4
• import method umd/csj/es (if umd, are you using the “full” version (only for v5+)?)
• react version #16.2.0
• bootstrap version #4.0.0-beta.3

What is happening?

The inner functions are not responding, however it does toggle off

What should be happening?

It should run the inner function first then toggle off

Steps to reproduce issue

1. …
2. …

Error message in console

No errors

paste error message with stacktrack here

Code

				<Dropdown className="float-left p-0 dropdown-header" isOpen={isOpenImage} toggle={this.toggleImageMenu}>
					<DropdownToggle nav>
						<img className="rounded-circle float-left mr-1" src={`${user && user.user_image ? user.user_image : ''}`} height={40} width={40} alt="" />
					</DropdownToggle>
					<div style={{top: '50px', position: 'relative'}}>
						<DropdownMenu>
							<DropdownItem onClick={() => console.log('WORKS')}>
								<div className="h-100 w-100" onClick={() => console.log('MAYBE')}>
                            Logout
								</div>
							</DropdownItem>
						</DropdownMenu>
					</div>
				</Dropdown>

I know you’ve had a lot of duplicates on this issue but it’s still not working. Any help would be greatly appreciated

[ravenberg]

I am also having this issue. Either fix it or remove the Button Dropdown from the docs. This is wasting peoples time.

[TheSharpieOne]

I am not sure I understand the issue, but from what I can tell, the issue is not with reactstrap, but with the user’s code. The onClick events fire as you should expect them to.

I took the code in the original post and only added the missing method (toggleImageMenu) and state management (defaulting state and using this.state.isOpenImage instead of just isOpenImage from the component in the sample code provided (I also changed the img’s src)

As you can see, the onClick events happen and in the order one would expect, the inner most element is triggered and the outer one is called afterwards. Finally the toggle is called.

https://stackblitz.com/edit/reactstrap-v5a4-starter-5ytga5?file=Example.js