React contentEditable and cursor position

I have a simple component

class ContentEditable extends React.Component{
  constructor(props){
    super(props);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    let html = event.target.innerHTML;
    if(this.props.onChange && html !== this.lastHtml){
      this.props.onChange({target:{value: html,name: this.props.name}});
      this.lastHtml = html;
    }
}

  render(){
    return (<span
                contentEditable="true"
                onInput={ this.handleInput }
                className={ 'auto '+this.props.className }
                dangerouslySetInnerHTML={ {__html: this.props.value} }>
            </span>);
  }
}
export default ContentEditable;

<ContentEditable value={this.state.name} onChange={(e)=>{this.setState({name:e.target.value});}} />

      

The component works, but my cursor is at the first position all the time instead of text.

I've tested examples from this forum but it doesn't work for me.

I am using React 15.6.1 and testing it for chrome (Os X). Any hint on how I can fix this problem?

+3
javascript reactjs


source to share


No one has answered this question yet

Check out similar questions:

1370
Get position (X, Y) of HTML element
1203
Navigate programmatically using responsive router
1094
Loop inside React JSX
724
What are these three points doing in Reacting?
431
jQuery Setting cursor position in text area
2
Using reagents and web components
2
Enzyme testing problems return undefined
0
What is the best way to test methods that go through react components
0
Inserting JSX as string variable in other JSX code in React JS
0
How to get datapicker value in react toobox custom?



All Articles
Loading...
X
Show
Funny
Dev
Pics