Error: Calls to EditorView.update are not allowed while an update is in progress

[Yijx]

I set onBlur function on CodeMirror and change state （cursor is in edit box）， at same time I use command+f to get a search box，CodeMirror will tell me 'Error: Calls to EditorView.update are not allowed while an update is in progress'. I think it is update conflict?

You can use this demo https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-xx4qvz?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

I didn't reproduce your error. @Yijx

[Yijx]

I didn't reproduce your error. @Yijx

Hi,it still has error, let me list the detailed steps first,enter the page,and wait for the page to load, and,move the cursor in the textarea last,press command+f or ctrl+f

Thanks for your help

[jaywcjlove]

• https://github.com/codemirror/codemirror.next/issues/141

[jaywcjlove]

@Yijx This may be a CM6 internal bug. I've released a new version that blocks the Ctrl+f shortcut.

But that didn't really solve the problem.

[jaywcjlove]

https://github.com/uiwjs/react-codemirror/blob/6bdc5c8503fd11146989e7adc01482cc6961b8fa/src/useCodeMirror.ts#L60-L79

@Yijx This is a really bad way.

[jaywcjlove]

https://codesandbox.io/embed/uiwjs-react-codemirror-issues-280-rw4zl7?fontsize=14&hidenavigation=1&theme=dark

@Yijx This is probably the best solution.

import React, { useEffect, useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

export default function App() {
  const [a, setA] = useState(0);
  const [extensions, setextensions] = useState([]);
  useEffect(() => {
    setextensions([javascript({ jsx: true })]);
  }, []);
  return (
    <div>
      {a}
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        extensions={extensions}
        onChange={(value, viewUpdate) => {
          console.log("value:", value);
        }}
        onBlur={() => setA(a + 1)}
      />
    </div>
  );
}

[lililo111]

https://codesandbox.io/embed/uiwjs-react-codemirror-issues-280-rw4zl7?fontsize=14&hidenavigation=1&theme=dark

@Yijx This is probably the best solution.

import React, { useEffect, useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";

export default function App() {
  const [a, setA] = useState(0);
  const [extensions, setextensions] = useState([]);
  useEffect(() => {
    setextensions([javascript({ jsx: true })]);
  }, []);
  return (
    <div>
      {a}
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        extensions={extensions}
        onChange={(value, viewUpdate) => {
          console.log("value:", value);
        }}
        onBlur={() => setA(a + 1)}
      />
    </div>
  );
}

I have the same problem using '@uiw/react-codemirror' in version 4.7.0, when I try to setStae in 'onBlur'. I don't know how this example help us to solve this problem. How could I solve it now and if anyone could help will be helpful.