Caret goes to the extreme left when value change

Question

When I change a value in an input field, (58.10) to (58.1), the cursor goes behind 5 as soon as I remove "0". I expect it to be beside "1".

React:

// Props
var data = [
  {unit_amount: 58.10, id: 1},
  {...},
  {unit_amount: 25.99, id: 3},
]

_valueChange(i, e){
  e.preventDefault();
  var obj = this.props.data;
  var num = obj.find(p => i === p.id);

  num.unit_amount = e.target.value;
},

// Render

var lineItems = this.props.data.map(function(l){
  return(
   <tr key={l.id}>
    <input type="number" value={l.unit_amount} onChange={this._valueChange.bind(this, l.id)} />
   </tr>
  )
})

Value changes ok but the cursor (the "pipe") goes to the extreme left once I hit the backspace button once. Any ideas?

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

It possible to set the cursor position after the value is set, just find the length of the string and set the cursor position to the length of the string.

Check this post out for the APIs your looking for. Get caret position in HTML input?

edited May 23 '17 at 10:34

Community

1
1

answered Sep 27 '16 at 11:28

Sten Muchow

6,623
4
36
46

Thanks. Is that the only option? More lines of code? – Sylar Sep 27 '16 at 11:33
Good question, I had a similar problem in the past and I seem to remember solving it like this. Thats my idea for now... – Sten Muchow Sep 27 '16 at 11:42
I see the issue. It's because the entire state gets replaced when I change the value. – Sylar Sep 27 '16 at 11:44

Caret goes to the extreme left when value change

1 Answers1