react-blessed icon indicating copy to clipboard operation
react-blessed copied to clipboard

`log` element not calling `setContent` on changes

Open samingle opened this issue 2 years ago • 0 comments

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

samingle avatar Aug 05 '22 20:08 samingle