When DayPickerInput get new props, it doesn't change its state

[youreme]

Hi,

When DayPickerInput gets nextProps, it doesn't change its states.
How about adding componentWillReceiveProps lifecycles?

After it mounted,
if it doesn't trigger any change events, the value state is different from value property.

DayPickerInput

componentWillReceiveProps(nextProps) {
  this.state = getStateFromProps(nextProps);
}

[infomiho]

+1

[gpbl]

Thinking about the use case here. Just resetting the state when the component receives new props doesn't work because the method it is always called when re-rendering the component. So we should add a condition there, like:

componentWillReceiveProps(nextProps) {
  if (nextProps.value !== this.state.value) {
    this.setState(getStateFromProps(nextProps));
  }
}

however this will cause the overlay to flicker (hide/show) when passing a value from the parent component, e.g. in this example. A similar issue would appear if the entered value is empty hence I'd use

if (nextProps.value && nextProps.value !== this.state.value) {

but I'm not sure if this would cover the common use cases 🤔

[spmebrge]

+1 experiencing same issue

[gpbl]

Thanks people for the report, the bug should have been fixed in v5.5.2

[youreme]

Hi~ thanks for update~!
it works well~

I have a question about componentDidMount.
why do you set state directly not using "setState" method?

thanks.

[gpbl]

@youreme are you talking about the constructor? https://stackoverflow.com/questions/34961853

[youreme]

@gpbl yes, constructor^^; Thanks for kindly information~

[darasi]

I had a bug where if you type something in input and prop value changes it does not update input value.
I fixed it like this.

class DayInput extends DayPickerInput {
  handleInputBlur(e) {
    this.setState({ typedValue: undefined });
    this.inputBlurTimeout = setTimeout(() => {
      if (!this.overlayHasFocus) {
        this.hideDayPicker();
      }
    }, 1);
    if (this.props.inputProps.onBlur) {
      e.persist();
      this.props.inputProps.onBlur(e);
    }
  }
}