Contents of codemirror box not updating from props if height is 0

[scotthwsnyder]

This is a bit hard to explain.

I have HTML blocks in a list. The "display" portion of each block always shows. I have a toggle button that the user can press to determine whether or not the "code" portion (Codemirror) is showing. The toggle animates the height of the box from 0 -> 300px with react-animate-height.

If I press my "add new block to top of list" button or my "duplicate this block" button, the array of items changes and a bunch of things re-render. Except Codemirror. If I add a block to the top, now the Codemirror for block #2 (for example) shows the actual code for #3. And #3 shows the code for #4. Clicking in the Codemirror box updates the code immediately and from then on it's fine.

If I animate the height from 1px -> 300px instead of from 0px -> 300px I don't have this problem anymore and the Codemirror boxes all show the right code always. I am considering dynamically coloring the Codemirror boxes to match my background and leaving them at 1px unless someone knows a solution for this.

This bug does NOT happen with a regular field.

I am using Codemirror like this:

<AnimateHeight className="codeContainer" duration={367} height={codeHeight}>
    <div className="codeContainer" >
        <Codemirror className="codeInputForm" value={this.props.code} onBeforeChange={this.handleCodeChange} options={codemirrorOptions} />
    </div>
</AnimateHeight>

Note: I am relatively new to React so maybe I am missing something obvious. If that's the case I apologize.

[scniro]

@scotthwsnyder Hm, so I'm not sure what could be internally going wrong with the height, but what if inside of explicitly setting the codemirror instance height, you instead give it a wrapper element with an overflow: hidden and set the animation on that?

[scniro]

@scotthwsnyder closing due to inactivity