Forum Discussion
Rise shift with transcripts
I was able to replicate this using an audio transcript. I debug it in this screen recording. From what I can tell, for some reason the class .transcript-panel-enter-done is getting removed prematurely from the transcript panel. Might be part of a larger js issue, as I can't imagine the content and transcript panel always behaved this way. Also a look at a password protected quiz plugin.
That's some great debugging PhilFoss . From what you showed in your YouTube video, here's what I think is happening:
Those class names for me are the giveaway: enter-active / enter-done are react-transition-group conventions, so the panel is a React CSSTransition component. enter-done is meant to persist for the entire time the panel is open and only comes off when an exit transition starts. CSSTransition adds its transition classes directly to the DOM node, not through React's className prop. So when a re-render changes the panel element's own class list (a modifier toggling during playback or on scroll, in this example), React rewrites the whole class attribute and the imperatively added enter-done gets wiped. No reset involved. RTG still believes the transition completed, which is exactly why it never puts the class back, and why the layout stays broken until you close and reopen the panel. A fresh enter cycle re-applies it.