Yomguithereal / react-blessed

A react renderer for blessed.
MIT License
4.46k stars 177 forks source link

`log` element not calling `setContent` on changes #124

Open samingle opened 2 years ago

samingle commented 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.

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.

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} />
  );
};