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]

• NS_ERROR_FAILURE in Firefox when focusing editor codemirror/dev#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]

react-codemirror/src/useCodeMirror.ts

Lines 60 to 79 in 6bdc5c8

	if (Array.isArray(basicSetup)) {
	/**
	* 🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
	* This is not a solution.
	* https://github.com/uiwjs/react-codemirror/issues/280
	*/
	basicSetup.map((item) => {
	if (item.value && Array.isArray(item.value)) {
	item.value = item.value
	.map((keymap: any) => {
	if ('Mod-f' === keymap.key) {
	return undefined;
	}
	return keymap;
	})
	.filter(Boolean);
	}
	return item;
	});
	}

@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.

[jaywcjlove]

@lililo111 You can try the following method

<CodeMirror
-  onBlur={() => setA("1")}
/>

import * as events from '@uiw/codemirror-extensions-events';

function App() {
  const eventExt2 = events.content({
    focus: (evn) => {
      console.log('focus');
    },
    blur: (evn) => {
      console.log('blur');
    },
  });

  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[
        eventExt2,
      ]}
    />
  );
}