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

onChange handler should not fire when props change

Open PvanHengel opened this issue 4 years ago • 1 comments

Hi, I am having an issue when trying to update some props from elsewhere in the app, that impact the value prop for CodeMirror. See the code below. There is a rather lengthy discussion on another wrapper here (https://github.com/scniro/react-codemirror2/issues/29) that somewhat describes this issue. Wondering if you had a clean work around, or way we can handle this in the component vs outside?

const Test = () => {

    const [state, setState] = useState({
        test:"value",
        editorValue:"Placeholder"
    })

    const changeState = () => {
        setState({test:"updated value", editorValue:"Updated Placeholder"})
    }

    return (
        <>
        <button onClick={changeState}>Change State</button>
        <CodeMirror
            value={state.editorValue}
            height="75vh"
            extensions={[xml({ jsx: true })]}
            onChange={(value, viewUpdate) => {
                setState({...state, editorValue: value )
            }}
        />
        <div>{JSON.stringify(state)}</div>
        </>
    )
}


export default Test

PvanHengel avatar May 02 '22 13:05 PvanHengel

@PvanHengel This is an CodeMirror internal method that listens for changes to the view. I see your value has changed, which should fire the onChange event.

https://github.com/uiwjs/react-codemirror/blob/22cc81971a532c04fbf22565d725db60a191c259/src/useCodeMirror.ts#L49-L55

jaywcjlove avatar May 21 '22 19:05 jaywcjlove