react-codemirror icon indicating copy to clipboard operation
react-codemirror copied to clipboard

Focus lost after typing character

Open alchy58 opened this issue 6 years ago • 2 comments

Hi, I'm facing a strange issue, I suppose I did something wrong. When I type a character, I lost the focus on the editor. Moreover, the autoFocus option did work so I need to click inside the editor before typing. What have I missed ?

I'm using react-codemirror 1.0.0

import React from 'react'
import ReactMarkdown from 'react-markdown'
import CodeMirror from 'react-codemirror'
import 'codemirror/mode/markdown/markdown'

export default class TopicContentComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            source: props.source,
        }
    }

    render () {
        const options = {
            lineNumbers: true,
            autoFocus: true,
            mode: 'markdown',
            theme: 'monokai',
        }

        const Preview = () => <ReactMarkdown source={this.state.source} />
        const Editor = () =>
            <CodeMirror
                value={this.state.source}
                onChange={(source) => this.setState({source})}
                options={options}
            />

        return (
            <div>
                <Preview />
                <Editor />
            </div>
        )
    }
}

Thank you

alchy58 avatar Apr 14 '19 09:04 alchy58

I am facing the same issue as well , the state change is causing this issue but i am unable to find a workaround.

Eshaan1999 avatar Aug 01 '23 11:08 Eshaan1999

+1 on this one

marabesi avatar Aug 21 '23 04:08 marabesi