Open samingle opened 2 years ago
Looking at the blessed source, it appears that react-blessed isn't triggering the set content event when updating a log element reactively.
set content
Failing example: In this version, the log won't keep scroll pinned to the bottom, because the set content event is never fired.
export const Debugger: React.FC<Debugger> = ({ debugEntries, isFocused }) => { return ( <log label="Debugger" top="75%" width="100%" height="25%" scrollOnInput={true} focusable={true} keys={true} class={styles}> {debugEntries.join("\n")} </log> ); };
Working example: In this version, the log will keep scroll pinned to the bottom, because we are explicitly calling setContent when the underlying content changes.
setContent
export const Debugger: React.FC<DebuggerProps> = ({ debugEntries, isFocused }) => { const ref = useRef<blessed.Widgets.Log>(null) useEffect(() => { if (ref.current) { ref.current.setContent(debugEntries.join("\n")) } }, [debugEntries]) return ( <log label="Debugger" ref={ref} top="75%" width="100%" height="25%" scrollOnInput={true} focusable={true} keys={true} class={styles} /> ); };
Looking at the blessed source, it appears that react-blessed isn't triggering the
set content
event when updating a log element reactively.Failing example: In this version, the log won't keep scroll pinned to the bottom, because the set content event is never fired.
Working example: In this version, the log will keep scroll pinned to the bottom, because we are explicitly calling
setContent
when the underlying content changes.