Currently
- I have a react component that stores a
newValue
when the user clicks on a contentEditable<div>
, and updatesnewValue
as the user types. Note: there are 2 main reasons why I have set up this behavior this way: (1) I do not want to send the data to be saved on every key stroke, and (2) I plan to use a variation of this div where each input is checked to verify whether the input is a number. - The
newValue
is sent to be saved when the<div>
loses focus, and then the state of the prop is reset.
Problem
The onChangeHandler
is moving the position of the caret within the editable div to the left hand side. This results in the key strokes 123456
appearing as 654321
Code:
class Input extends Component {
constructor(props) {
super(props);
this.state = {
//newValue input by user
newValue : undefined
}
}
//handler during key press / input
onChangeHandler = event => {
let targetValue = event.currentTarget.textContent;
this.setState({"newValue": targetValue})
}
//handler when user opens input form
onBlurHandler = event => {
//some code that sends the "newValue" to be saved, and resets state
}
render() {
//determine which value to show in the div
let showValue;
//if there is a new value being input by user, show this value
if (this.state.newValue !== undefined) {
showValue = this.state.newValue;
} else {
//if prop has no value e.g. null or undefined, use "" placeholder
if (this.props.value) {
showValue = this.props.value;
} else {
showValue = "";
}
}
return (
<table>
<tbody>
<td>
<div
contentEditable="true"
suppressContentEditableWarning="true"
onInput={this.onChangeHandler.bind(this)}
onBlur={this.onBlurHandler}
>{showValue}
</div>
</td>
</tbody>
</table>
)
}
}
export default Input;
Notes
- I previously was doing this with a
<textarea>
which did not have this issue, but switched to<div>
for more control over the auto-adjusting div height behavior (ref CSS: Remove scroll bar and replace with variable height for textarea in a table <td>) - I have been able to find numerous related answers, but none that are specific to react e.g. Maintain cursor position in contenteditable div. I assume because react is reloading the component after each stroke, this issue is occurring.
- I previously had no ChangeHandler onInput, and this was working fine, but I was unable to log each key press and validate whether the character was a number.