Please fix infinite loop

[ndinhphi]

Hi,
This is my code:
<Flatpickr
onChange={v => {
this.setState({
task: update(this.state.task, {
repeatEnd: { $set: new Date(v) }
})
});
}}
options={{
minDate: this.state.task.startAt,
maxDate: this.state.task.dueAt,
enableTime: false,
defaultDate: this.state.task.repeatEnd
}}
/>

When defaultDate is null, I get infinite loop when I change value. But when defaultDate is not null, It works fine.
If I remove minDate, maxDate option, It works for defaultValue null.
Can you help me fix this. Thanks.
Sorry for my poor english.

[gitmurali]

This is very buggy I tried but it goes infinite and never stops for anyone.

[jacobmischka]

The prop defaultValue is the only one used by react-flatpickr, it passes it along to the underlying <input /> element. The defaultDate attribute in the options object is merely passed along to flatpickr and isn't touched by react-flatpickr at all other than that.

That being said, I seem to be unable to reproduce this using those options. It seems like your problem is that your setState is causing the react component to rerender, which is causing the loop.

I don't see any infinite loops when using the following code. If I'm missing something please let me know what it is.

import 'flatpickr/dist/themes/material_green.css'

import React, { Component } from 'react'
import { render } from 'react-dom'

import Flatpickr from '../'

class App extends Component {
  state = {
    defaultDateValue: null,
    onChange: (_, str) => {
      console.info(str)
    }
  }

  render() {
    return (
      <main>
        <Flatpickr
          onChange={v => {
            this.setState({defaultDateValue: v})
          }}
          value={this.state.defaultDateValue}
          options={{
            minDate: '2017-01-01',
            maxDate: '2018-01-01',
            defaultDate: null
          }} />
      </main>
    )
  }
}

window.init = () => {
  render(<App />, document.querySelector('#container'))
}

[rkmax]

I have this problem too when pass the options.maxDate, example how I'm using like follows

<Flatpickr placeholder="Birthday" onChange={handleOnChange} options={maxDate: new Date()}/>

When the whole app is rendered the first time I dont have problem (when user type the url and open) but when the user navigate from a diffent route, take a while (more than 30s) to able to change the route and then react prints on the console Too much recursion

[chongdog83]

I had the same issue and solved it by changing onChange to onClose... I feel like this library is somehow polling the value or something, which can easily create that infinite loop.

Also it returns an array with the date inside of it. When I set the initial state to an empty array or empty string, it did that infinite loop. When I set the initial date to a date string, it doesn't... but that feels wrong, why set the state to a string when it's going to return an array? Also why set it in state to begin with if you are going to set the options to defaultDate: null?

All that being said, this is working for me:
(in this example I'm having the user tell me the start date and time of a party)

<Flatpickr
  data-enable-time
  id="start"
  name="start"
  options={{
    minDate: '2017-09-01',
    defaultDate: null,
    dateFormat: 'l m/d/Y at h:i K',
    altInputClass: 'form-conrol',
    minuteIncrement: '15'
  }}
  onClose={v => {this.setState({start: v})}}
  className="form-control"
  placeholder="Click here to select shift date and start time"
 />

[Phyks]

Same problem, using onClose does the trick, but is not fired when pressing backspace to clear the field :/

[ZeHiro]

We had a bug in our code.

[jacobmischka]

I think should should be fixed in 3.6.1, but it's hard for me to tell because I still haven't been able to reproduce it. Please let me know either way, thanks!

[codeincontext]

I had this problem when creating a new maxDate object within the render function. Moving it to a const fixed it.

Bad:

                  <Flatpickr
                    value={fromDate}
                    options={{ maxDate: new Date() }}
                    onChange={this.handleFromDateChange}
                  />

Good:

const MAX_DATE = new Date();
...

                  <Flatpickr
                    value={fromDate}
                    options={{ maxDate: MAX_DATE }}
                    onChange={this.handleFromDateChange}
                  />

[rkmax]

@skattyadz the problem is I need change the maxDate based on some business logic, so cannot be a constant on my code

[codeincontext]

Yea, I still don't see why it triggers a change and this is probably still a bug

…

On Fri, 1 Dec 2017, 20:16 Julian Reyes Escrigas, ***@***.***> wrote: @skattyadz <https://github.com/skattyadz> the problem is I need change the maxDate based on some business logic, so cannot be a constant on my code — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFj64dHsBrRV8xaEahd1fNdH6hmWTunks5s8F6XgaJpZM4PIr7D> .

[jacobmischka]

Sorry, I have yet to be able to reproduce it. If someone can please provide a link to a repo or webpackbin or something that illustrates the issue I'll be happy to look into it, but I don't get any loops when trying any of the snippets posted in this issue.

[rkmax]

Today I did some testing https://www.webpackbin.com/bins/-L-SOX_Eo80IPC0Ojo-9, now I'm confused :/ it looks something with flatpickr library instead