-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Not closing the calendar on selection of a date #1012
Comments
Had the same issue, but in my case I had a label that was wrapping the date picker that caused this problem. e.g.
|
I have the same issue. Datepicker doesn't close if a date is selected. |
I can confirm, I am experiencing the same issue. If Datepicker is wrapped in a label tag it doesn't close on selecting a date. |
I see this problem to. I have a component that wraps a Datepicker component in a label tag. The calendar stays open after selection. If I change the label to a div, it works properly. I will add, I use this component in three different webpack entry points on the same app, and in one of them it works fine. The main difference between the builds is one uses React Router 2 (calendar works properly) and the others use React Router 4 (calendar stays open). I'll have to look harder at that to see if that's part of the problem. |
Same here, trying to use |
adding edit: I'm using |
+1, I have a label that wraps datepicker component. I use to let user click on a button near the datepicker and open the datepicker as clicking on label triggers focus on the inner input. |
My solution is a mix of the above mentioned ones.
|
Hello! Any news? This bug still doesn't fixed :( |
Facing same problem, putting datepicker inside label causing it to not close on date/time selection. Works fine when used outside of label. |
Has anyone got a solution to this problem yet? my problem is I cant use this.calender or ref as mentioned in above solutions because my label is inside a stateless component. |
@waheedsid, I think my solution will work if you refactor your component to stateful. |
If the datepicker remains open because it is wrapped inside import React from 'react';
import DatePicker from 'react-datepicker';
class MyDatepicker extends React.Component {
handleChange = (date, e) => {
if (e && typeof e.preventDefault === 'function') {
e.preventDefault();
}
const {onChange} = this.props;
if (onChange) {
onChange(date);
}
};
render() {
return (
<DatePicker
{...this.props}
onChange={this.handleChange}
/>
);
}
}
... |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Rather than calling const labelContentRef = useRef(null)
const onClickLabel = useCallback(
event => {
if (event.nativeEvent.target !== labelContentRef.current) {
event.preventDefault()
}
},
[]
)
return (
<label onClick={onClickLabel}>
<span ref={labelContentRef}>
{label}
</span>
<DatePicker
// props go here...
/>
</label>
) Note that, in my case, the |
When Field is a date (react-datepicker), the label conflicts with the behavior of the calendar modal. Cf Hacker0x01/react-datepicker#1012 (comment) So this tests the solution.
The calendar is not hidden when a calendar date is selected. No errors or warnings are placed into the console. React Calendar V 0.53.0
The text was updated successfully, but these errors were encountered: