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
laynef
All 16 comments
I'm looking at the resource code and you can see that onClick never gets fired after it's rendered. I'm looking more into it
laynef
on 21 Jan 2018
It's a binding issue, because if you don't bind your function it works
laynef
on 22 Jan 2018
So head way on this issue, the
This was me, playing around with the webpacked JavaScript
{
key: 'handleDocumentClick',
value: function handleDocumentClick(e) {
if (e && (e.which === 3 || e.type === 'keyup' && e.which !== _utils.keyCodes.tab)) return;
var container = this.getContainer();
if (container.contains(e.target) && container !== e.target && (e.type !== 'keyup' || e.which === _utils.keyCodes.tab)) {
return;
}
setTimeout(() =>{this.toggle(e);}, 100)
}
},
This was my fix ^^^
laynef
on 22 Jan 2018
I'm now working on the update to that component in the source code
laynef
on 22 Jan 2018
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';
i am also having the dropdown issue in a navbar (on bottom so using dropup property on Dropdown.
i am unsure where your code would go. could you elaborate a little more and give a complete example? this would be much appriciated! :)
Edit: got it working. was just a quick styling fix:
.dropdown-item { background-color: white;}
fuchsberger
on 23 Jan 2018
I am also having this issue. Either fix it or remove the Button Dropdown from the docs. This is wasting peoples time.
ravenberg
on 24 Jan 2018
UncontrolledDropdown handles the state inheritance well because the toggle prop is not handling inheritance of events. For inheritance in styles just use your SASS file to override them. And for the fix on Dropdown component I put a setTimeout on the toggle function on file Dropdown.js on line 145. In reality the fix would require a Promise resolver. Like Promise.all([promises_of_events]) but the inheritance needs to be fixed on the Dropdown component. I'd use UncontrolledDropdown for now.
laynef
on 25 Jan 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.
https://stackblitz.com/edit/reactstrap-v5a4-starter-5ytga5?file=Example.js
TheSharpieOne
on 25 Jan 2018
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { logout } from '../redux/actions/user';
import { Link } from 'react-router-dom';
import { startCase } from 'lodash';
import {
Navbar,
Nav,
NavItem,
Dropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
} from 'reactstrap';
import userNavData from './userNavData';
@connect((state) => ({
user: state.user.data,
notifications: state.notifications.data,
messages: state.messages.data,
}))
export default class Header extends Component {
constructor(props, context) {
super(props, context);
this.state = {
isOpenChat: false,
isOpenNotification: false,
isOpenImage: false,
collapse: false,
};
this.toggleChatMenu = this.toggleChatMenu.bind(this);
this.toggleNotificationMenu = this.toggleNotificationMenu.bind(this);
this.toggleImageMenu = this.toggleImageMenu.bind(this);
this.toggleCollapse = this.toggleCollapse.bind(this);
this.exit = this.exit.bind(this);
}
toggleChatMenu() {
this.setState({
isOpenChat: !this.state.isOpenChat,
});
}
toggleNotificationMenu() {
this.setState({
isOpenNotification: !this.state.isOpenNotification,
});
}
toggleImageMenu() {
this.setState({
isOpenImage: !this.state.isOpenImage,
});
}
toggleCollapse() {
this.setState({
collapse: !this.state.collapse,
});
}
exit() {
const { dispatch, history } = this.props;
Promise.all([dispatch(logout())])
.then((values) => {
if (values[0]) {
history.push(`/${process.env.BASE_URL}/signup`);
}
});
}
userRigtTopNav() {
const { isOpenChat, isOpenNotification, isOpenImage } = this.state;
const { user, notifications, messages } = this.props;
return (
<div className="vert-center h-100 w-100 f-sb">
<Dropdown isOpen={isOpenChat} className="float-left p-0 dropdown-header" toggle={this.toggleChatMenu}>
<DropdownToggle nav>
<i className="fa fa-commenting fs-24 mt-2 mr-1"></i>
</DropdownToggle>
<DropdownMenu>
{messages && Object.values(messages)
.map((e) => e[e.length - 1])
.map((e, i) => (
<div className="menuItem" key={i}>
<DropdownItem>
<div className="h-100 w-100 f-row f-sb">
<div className="w-20 h-100 float-left">
<img
className="message-dd-image rounded-circle img-thumbnail"
src={e.other_id === user.user_id ? e.sender_user_image : e.user_id === user.user_id ? e.receiver_user_image : null}
alt="" />
</div>
<div className="w-70 f-column h-100 float-left pl-2">
<h5>{e.other_id === user.user_id ? `${e.sender_user_first_name} ${e.sender_user_last_name}` : e.user_id === user.user_id ? `${e.receiver_user_first_name} ${e.receiver_user_last_name}` : null}</h5>
<p>{e.text}</p>
</div>
</div>
</DropdownItem>
</div>
))}
{(!messages || !Object.values(messages).length) &&
<DropdownItem>
No messages
</DropdownItem>}
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={isOpenNotification} className="float-left p-0 dropdown-header" toggle={this.toggleNotificationMenu}>
<DropdownToggle nav>
<i className="fa fa-bell fs-24 mt-2 mr-1"></i>
</DropdownToggle>
<DropdownMenu>
{notifications && notifications.map((e, i) => (
<div className="menuItem" key={i}>
<DropdownItem>
<div className="h-100 w-100 f-row f-sb">
<div className="w-20 h-100 float-left">
<img
className="message-dd-image rounded-circle img-thumbnail"
src={e.other_image}
alt="" />
</div>
<div className="w-70 f-column h-100 float-left pl-2">
<h5>{`${e.other_first_name} ${e.other_last_name}`}</h5>
<p>{e.text}</p>
</div>
</div>
</DropdownItem>
</div>
))}
{(!notifications || !notifications.length) &&
<DropdownItem>
No notifications
</DropdownItem>}
</DropdownMenu>
</Dropdown>
<div className="float-left">
<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>
<DropdownMenu>
<DropdownItem onClick={this.exit}>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="float-left hidden-xs hidden-sm hidden-md">
<p className="centered mt-3">{`${user && user.user_first_name ? startCase(user.user_first_name) : startCase(user.user_permissions)}`}</p>
</div>
</div>
);
}
render() {
const { user } = this.props;
return (
<div id="Header">
<Navbar color="white" light expand>
<div className="w-100 f-row f-sb hidden-md hidden-lg hidden-xl">
<div className="w-100 hort-center f-sa">
<div className="w-100 f-sb vert-center">
<div className="w-33 hort-start" onClick={() => this.toggleCollapse()}>
{user && user.user_id && (
<i className="selectable-hover fa fa-bars fw-200 gray-light fs-20"></i>
)}
</div>
<a className="w-33 hort-center" href="/">
<img src="/assets/img/rhn-logo.png" height={48} alt="" />
</a>
<div className="w-33 hort-end">
<div className="w-70">
{user && user.user_id && this.userRigtTopNav()}
</div>
</div>
</div>
</div>
</div>
<div className="w-100 f-row f-sb hidden-xs hidden-sm">
<a name="Home" className="nav-link navbar-brand vert-center" href="/">
<img src="/assets/img/rhn-logo-green.svg" className="mr-2" height={38} alt="" />
Recovery Help Now
</a>
<div className="vert-center w-15">
<Nav className="ml-auto vert-center w-100" navbar>
{user && user.user_id ? this.userRigtTopNav() : !user ? (
<NavItem>
<a name="Back Home" className="nav-link react-link" href="/">
Back to Homepage
</a>
</NavItem>
) : null}
</Nav>
</div>
</div>
</Navbar>
<div className="w-100 hidden-md hidden-lg hidden-xl">
{this.state.collapse && (
<div>
{userNavData && userNavData.map((e, i) => (
<Link key={i} to={e.path} className="w-100 hort-center card" onClick={() => this.toggleCollapse()}>
<div className="bg-white w-100 border-half height-50 w-100 f-row f-sb pl-3 pr-3">
<div className="w-25 vert-center hort-center">
<i className={`fa fa-${e.icon} fs-24 text-center`} aria-hidden="true"></i>
</div>
<div className="w-50 vert-center hort-center">
<p className="text-left">{e.name}</p>
</div>
</div>
</Link>
))}
</div>
)}
</div>
</div>
);
}
}
Here's the whole file, and obviously I declared state at the top of the file. Your version of React is not the same has I posted above, you are using 16.1.1 If you find a way to make it work that would be great but I had to use UncontrolledDropdown
laynef
on 25 Jan 2018
I'm using 16.2.0
laynef
on 25 Jan 2018
I updated the previous example to use 16.2.0, and it works the same: https://stackblitz.com/edit/reactstrap-v5a4-starter-5ytga5?file=Example.js
I took your code and remove the bits of state and such which prevent the dropdown from rendering and it was able to trigger the exit function before the closing toggle was called.
https://stackblitz.com/edit/reactstrap-v5a4-starter-us5ddj?file=Example.js
One thing I did notice in your code is that you are using async code via promises in your exit function. If you are expecting the promise to resolve before the toggle function gets called, that is not how promises work.
Given
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
and seeing that the function are triggering as they should, it's hard to determine what the issue is.
Other than that, a minimal viable example is needed. I have done my best with the original demo link
TheSharpieOne
on 25 Jan 2018
@laynef the importing of uncontrolled components has been fixed by #792
supergibbs
on 26 Jan 2018
I'm closing this since the the issue is no longer active and no new information has been provided. Please comment and it will be opened if you feel the issue has not been resolved / the question has not been answered.
TheSharpieOne
on 30 Mar 2018
You must have used "npm run eject", and because of this, reactstrap cannot work.
ekremcoban
on 16 Jan 2019
Related issues
leebradley
路
16Comments
changLiuUNSW
路
18Comments
ruszki
路
15Comments
cvlmtg
路
20Comments
octylFractal
路
42Comments
Most helpful comment
I am also having this issue. Either fix it or remove the Button Dropdown from the docs. This is wasting peoples time.