CODEWITHSUNDEEP
javascripthtmlreactjsinputcustom-component
user2779450
user2779450

Reputation: 775

React Cursor for Input Component Jumps to Start on Certain Deletes

I created a React component built on top of an input element. I have provided a sandbox here: https://codesandbox.io/s/green-monad-tgn45?file=/src/input.jsx. Everything works fine, except I continue to have an issue when I try deleting something with a space. For instance, typing "this is some text" and then deleting any of these words makes my cursor jump to the start of the input field. Deleting characters works fine, but for some reason when I delete a character whose preceding character is a space, it jumps me to the start. Strangely, if I type "test " or some other word with a bunch of spaces at the end, I have no issues. However, as soon as I have a word preceded by a space such as "test one", deleting the second word causes my cursor to jump to the start.

I have seen other people have issues with cursors jumping to the end, but never cursors jumping to the start in this manner. Is there something wrong with how I am handling onChange events?

Here is my component (code is also provided in the sandbox):

class Input extends Component {
  state = {
    inputValue: ""
  };

  handleChange = event => {
    console.log(event.target.value);
    this.setState({ inputValue: event.target.value });
    if (this.props.onChange) this.props.onChange(this.state.inputValue);
  };

  render() {
    const { type, maxLength, placeholder } = this.props;

    return (
      <input
        type={type}
        value={this.state.inputValue}
        name="input-form"
        onChange={this.handleChange}
        maxLength={maxLength}
        placeholder={placeholder}
      />
    );
  }
}

Upvotes: 1

Views: 456

Answers (1)

ezio4df
ezio4df

Reputation: 4195

i dont think theres any problem with your code. its with this,

<Input type="email" maxLength="100" placeholder="test" />

With input type email, browser probably trys to check and formats. AS you cant have trailing space in emails, right.
Try changing type to text, it the problem disapears!!,

<Input type="text" maxLength="100" placeholder="test" />

Upvotes: 1

Related Questions