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?