componentWillReceiveProps -> componentDidUpdate

[mfix22]

Instead of using componentDidUpdate, you could also update this component to use getDerivedStateFromProps if you are willing to put this.input in state instead:

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.value) {
    if (state.input === document.activeElement) {
      return { blurValue: String(props.value).toUpperCase() }
    } else {
      return { value: String(props.value).toUpperCase(), blurValue: !state.blurValue && String(props.value).toUpperCase() }
    }
  }
}

...

ref={ input => this.setState({ input }) }

Let me know if you all prefer one over the other.

Begin #634

[mikkpokk]

@mfix22 Here is actually bugless solution using componentDidUpdate method.

export class EditableInput extends (PureComponent || Component) {
    input = React.createRef();

    ...

    componentDidUpdate(prevProps, prevState) {
        const input = this.input.current || null;

        if (
            this.props.value !== this.state.value && 
            (prevProps.value !== this.props.value || prevState.value !== this.state.value)
        ) {
            if (input === document.activeElement) {
                this.setState({
                    blurValue: String(this.props.value).toUpperCase()
                });
            } else {
                this.setState({
                    value: String(this.props.value).toUpperCase(),
                    blurValue: !this.state.blurValue && String(this.props.value).toUpperCase()
                });
            }
        }
    }

    ...

    render() {
        ...
        <input
                    ref={this.input}
                    ....
            />

        ...
    }

[dreyks]

any updates on this one?

[rinick]

@mfix22 there are 3 places that use componentWillReceiveProps, but this PR only fixed one of them

[mfix22]

@rinick is that preventing this PR from being merged? I can probably take a look at the other ones this weekend. I don't think it is a problem for them to come from separate PRs or even separate people.

[mfix22]

@casesandberg anything you need from me before merging this? Do you want to go the cDU route, or the gDSFP route?

[rinick]

@rinick is that preventing this PR from being merged? I can probably take a look at the other ones this weekend. I don't think it is a problem for them to come from separate PRs or even separate people.

I'm not a maintainer of this this project, I just feel doing it right would increase the chance of it getting merged.

These 3 places are basically the same issue. It would be really weird if it's fixed by 3 different people with 3 different PRs

[mfix22]

I just pushed the other 2 PRs. The maintainer can decide which to merge in where. 🤷‍♂

[casesandberg]

Looks great. This will be released shortly as react-color@2.18.0