Skip to content
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

Bug/range not updated #6

Merged
merged 4 commits into from
Oct 19, 2015
Merged

Conversation

aommm
Copy link
Contributor

@aommm aommm commented Oct 14, 2015

This fixes #5.

This pull request listens for prop changes, and whenever any of those two properties change, we re-parse them.

Note/discussion:
this might be a problem for other properties as well, but I only solved it for my use case for now.
Ideally, we would perhaps restructure the code so that the dates information is not stored in two places (props and state). One could for instance store the dates only as props, and do the parsing of the dates only when needed (i.e. in render)

@burakcan
Copy link
Collaborator

Thank you @aommm :)

i think it may be better if you use setRange method of the DateRange component instead setting the state directly while receiving new props.
https://github.com/aommm/react-date-range/blob/bug/range-not-updated/src/DateRange.js#L44

@aommm
Copy link
Contributor Author

aommm commented Oct 14, 2015

Good point, have done so now!

@aommm
Copy link
Contributor Author

aommm commented Oct 14, 2015

Whoops. Noticed an error (in my code) when testing the latest commit.

setRange also calls the onChange listener, and in my case, that listener updates the x and y properties. This in turn triggers a new setRange, and so on into infinity.

Toy example of my setup:

render() {
  return <DateRange startDate={x} endDate={y} onChange={this.datepickerChanged.bind(this)} />
}
...
datepickerChanged(range) {
  this.setState({x: range.startDate, y: range.endDate});
}

If you have this setup and trigger a change of x or y, you end up in an infinite loop.
I think this is a fairly common use case, so it would be nice if it could be supported.

Proposal:
onChange should only trigger when dates change 'internally', that is, when the user changes them from within the datepicker component.
This could be achieved by adding options to the setRange method, so I can pass {silent: true} in my use case above. If silent is true, it would not trigger any onChange-event.

What do you think about this?

@burakcan
Copy link
Collaborator

@aommm good point. sure we need a way to do silent changes and having { silent : true } looks good to me.

@burakcan
Copy link
Collaborator

@aommm is this ready to be merged?

@aommm
Copy link
Contributor Author

aommm commented Oct 18, 2015

Yes, I've tested it and it behaves as expected.
Den 17 okt 2015 18:55 skrev "Burak Can" notifications@github.com:

@aommm https://github.com/aommm is this ready to be merged?


Reply to this email directly or view it on GitHub
#6 (comment)
.

burakcan added a commit that referenced this pull request Oct 19, 2015
@burakcan burakcan merged commit 8138e09 into hypeserver:master Oct 19, 2015
@burakcan
Copy link
Collaborator

thanks @aommm

@burakcan
Copy link
Collaborator

@aommm i'm reverting this back since it's breaking current behavior which can be reproduced in the demo app. If you run the demo app with your build and try to change the range manually (by clicking) you can see what's broken.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Range not updated when properties change
2 participants