reactstrap: 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

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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

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

ravenberg on Jan 24, 2018

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.

dropdown-triggers

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

TheSharpieOne on Jan 25, 2018

<UncontrolledDropdown> works as intended. Let me know if you need help solving the toggle issue on the <Dropdown> component. I’d love to be of service, just reach out.

You can close this if you want but the problem exists. The toggle prop on the Dropdown component doesn’t work as intended shown on your documentation.

For anybody else just import UncontrolledDropdown like this. There’s an issue that too because the imports should be global lie import { UncontrolledDropdown } from 'reactstrap'; but currently that is broken. I’d love to help out where I can. Just reach out.

    import { UncontrolledDropdown } from 'reactstrap/lib/Uncontrolled';

laynef on Jan 22, 2018