Value not displaying on collapse

[philcon93]

Hey there, I see from the existing issues this repo isn't maintained but I wanted to see if I could get any help before I look into replacing this dependency 🙂

The value in an UnControlled CodeMirror looks to not display if it's originally in a collapse mode. We use Charka UI to have the CodeMirror in an Accordion, but when you expand the AccordionItem, the CodeMirror doesn't display the value. It has the value, and when you click on the CodeMirror it will then display the value, but the cursor prompt doesn't display, until you type something and it will enter the value at the end of your string.

I have a working example of the issue if anyone can help: https://codesandbox.io/s/nifty-tereshkova-87y7v?file=/src/App.js

What is strange is if you remove the AccordionPanel from around the CodeMirror, it will work correctly, not visually in the Accordion as it doesn't collapse anymore, but the CodeMirror will work correctly.

I originally thought this was a Charka UI issue, but I think it's more of how CodeMirror handles height internally. Any feedback would be amazing!

Cheers

[philcon93]

For others struggling on this, I've fixed it in that code sandbox, but I'm a little iffy if it's a good solution.

You have to call editor.refresh(), everyone tells you to have to do it at editorDidMount, e.g:

editorDidMount={(editor) => editor.refresh()}

But this doesn't work in a collapse/tab situation, you have to call refresh when the collapse/tab is expanded. But even that doesn't work, you have to delay it with a setTimeout so CodeMirror can get the correct height I presume.

  useEffect(() => {
    if (isExpanded) {
      setTimeout(() => {
        codeMirrorRef.current.editor.refresh();
      }, 0);
    }
  }, [isExpanded]);