Class CellInput

components/dash-table/src/dash-table/components/CellInput/index.tsx:28–130

}

export default class CellInput extends PureComponent<ICellProps, ICellState> {
    textInputRef: React.RefObject<any>;
    constructor(props: ICellProps) {
        super(props);

        this.state = {
            value: props.value
        };

        this.textInputRef = createRef();
    }

    render() {
        const {className, onMouseUp, onPaste, value} = this.props;

        // input does not handle `null` correct (causes console error)
        const sanitizedValue =
            this.state.value === null ? undefined : this.state.value;

        return (
            <div className='dash-input-cell-value-container dash-cell-value-container'>
                <div className='input-cell-value-shadow cell-value-shadow'>
                    {value}
                </div>
                <input
                    ref={this.textInputRef}
                    type='text'
                    className={className}
                    onBlur={this.propagateChange}
                    onChange={this.handleChange}
                    onKeyDown={this.handleKeyDown}
                    onMouseUp={onMouseUp}
                    onPaste={onPaste}
                    value={sanitizedValue}
                />
            </div>
        );
    }

    propagateChange = () => {
        if (this.state.value === this.props.value) {
            return;
        }

        const {onChange} = this.props;

        onChange(this.state.value);
    };

    handleChange = (e: any) => {
        this.setState({value: e.target.value});
    };

    handleKeyDown = (e: KeyboardEvent) => {
        const is_focused = this.props.focused;

        if (
            is_focused &&