EditableText should not reset value in componentWillReceiveProps when uncontrolled

[dskiff]

Bug report

• Package version(s): 1.11.1
• Browser and OS versions: Chrome 57.0.2987.133 (64-bit) on OSX 10.11.6 (though I'm pretty confident this doesn't matter)

Steps to reproduce

1. Add an editable text with an uncontrolled value, but some other prop controlled by state. (e.g. <EditableText placeholder={this.state.placeholder} />)
2. Type some text into the EditableText
3. Change the state (e.g. e.g. this.setState({ placeholder: "new-placeholder" }))

Actual behavior

The value in the EditableText should remain the same

Expected behavior

The value in the EditableText is cleared

Hypothesis for the underlying issue

EditableText resets its state value in componentWillReceiveProps, which seems very wrong when the component's value is uncontrolled.

[dskiff]

I needed something in ~10 minutes, so I used the following as a quick, temporary workaround:

import * as React from "react";
import { EditableText, IEditableTextProps } from "@blueprintjs/core";

interface UncontrolledEditableTextState {
    value: string;
}

interface UncontrolledEditableTextProps extends IEditableTextProps {
    value?: null;
    onChange?: null;
}

export class UncontrolledEditableText extends React.PureComponent<UncontrolledEditableTextProps, UncontrolledEditableTextState> {
    constructor(props: UncontrolledEditableTextProps) {
        super(props);
        this.state = {
            value: props.defaultValue,
        };
    }

    componentWillReceiveProps(nextProps: UncontrolledEditableTextProps) {
        if (nextProps.defaultValue !== this.props.defaultValue) {
            this.setState({
                value: nextProps.defaultValue,
            });
        }
    }

    render() {
        return (
            <EditableText
                {...this.props}
                value={this.state.value}
                onChange={this.handleChange}
                onCancel={this.handleCancel}
            />
        );
    }

    private handleChange = (value: string) => {
        this.setState({ value });
    }

    private handleCancel = (value: string) => {
        this.setState({ value });

        if (this.props.onCancel) {
            this.props.onCancel(value);
        }
    }
}