LineNumber is misaligned inside Modal

[18888628835]

this is demo:https://codesandbox.io/s/react-codemirror-linenumber-bug-n0l0ff?file=/src/app.tsx

when open Modal (once or twice ), you can see LineNumber is misaligned. If mouse move in ,it will be normal.

how can I fix it ?

[18888628835]

[jaywcjlove]

@18888628835

<CodeMirror
+  height="200px"

[jaywcjlove]

https://codesandbox.io/embed/react-codemirror-linenumber-bug-forked-661eh4?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-513-2kfl6n?fontsize=14&hidenavigation=1&theme=dark

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

const data = JSON.stringify(
  [
    {
      id: 1,
      name: "tonny",
      age: 40,
      email: "tonny@dashcomb.com"
    },
    {
      id: 2,
      name: "arai",
      age: 30,
      email: "arai@dashcomb.com"
    },
    {
      id: 3,
      name: "collin",
      age: 50,
      email: "collin@dashcomb.com"
    }
  ],
  null,
  2
);

export default function App() {
  const [visable, setVisable] = useState(false);
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log("value:", value);
  }, []);
  return (
    <div>
      <button onClick={() => setVisable(!visable)}>展示</button>
      {visable && (
        <CodeMirror
          // value="console.log('hello world!');"
          value={data}
          height="200px"
          theme="dark"
          extensions={[javascript({ jsx: true })]}
          onChange={onChange}
        />
      )}
    </div>
  );
}

[18888628835]

@jaywcjlove Thank you... I know it's not react-codeMirror's bug...

[Jenny-pyl]

@jaywcjlove but if content is short, setting height doesn't work. the reason why this demo works is triggering 'scroll' event