CODEWITHSUNDEEP
javascriptreactjsdry
Gurnzbot
Gurnzbot

Reputation: 4152

DRY react input handling causes cursor to jump

I was trying to DRY up my react forms a bit, so I wanted to move my basic input-handling function to a utility module and try to reuse it. The idea was to update an object that represented the state, return it in a Promise, and then update the state locally in a quick one-liner.

Component

import handleInputChange from "./utility"

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={e => handleInputChange(e, this.state).then(res => {
                    this.setState(res);
                })}
            />
        )
    }
};

utility.js

export const handleInputChange = (event, state) => {
    const { id, value } = event.target;
    return Promise.resolve({
        data: {
            ...state.data,
            [id]: value
        }
    });
};

It seems to work fine, however the issue is that the input's cursor always jumps to the end of the input.

If I use a normal local input handler and disregard being DRY, then it works fine. For example, this works without issue regarding the cursor:

Component

class MyInputComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: {
                title: ""
            }
        };
    }

    handleInputChange = event => {
        const { id, value } = event.target;

        this.setState({
            data: {
                ...this.state.data,
                [id]: value
            }
        });
    };

    render() {
        return (
            <input
                type="text"
                id="title"
                value={this.state.data.title}
                onChange={this.handleInputChange}
            />
        )
    }
};

Any idea why the cursor issue would happen when I tried to be DRY? Is the promise delaying the render, hence the cursor doesn't know where to go? Thanks for any help.

Upvotes: 0

Views: 256

Answers (1)

Chris Parsonage
Chris Parsonage

Reputation: 93

I'm a little confused with what you are trying to do in the long run. If you want to be DRY maybe your react component could look like this 

   render() {
    return (
        <input
            type={this.props.type}
            id={this.props.title}
            value={this.props.value}
            onChange={this.props.handleInputChange}
        />
    )
  }

this way you pass everything in and it stay stateless and everything is handle at a high component

however doing the way you have asked could you not use something like the below and you would not need to use a promise to return an object?

onChange={e => this.setState(handleInputChange(e, this.state))}

Upvotes: 2

Related Questions