From 24dc0bbc88bcfd083e03b0c8601cffb08e8d5728 Mon Sep 17 00:00:00 2001
From: Akos Kitta <a.kitta@arduino.cc>
Date: Fri, 3 Mar 2023 09:17:16 +0100
Subject: [PATCH] fix: update monitor output after widget show

Closes #1724

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
---
 .../browser/serial/monitor/monitor-widget.tsx    |  5 +++++
 .../monitor/serial-monitor-send-output.tsx       | 16 +++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx
index a5a25230..ec83f5a0 100644
--- a/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx
+++ b/arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx
@@ -117,6 +117,11 @@ export class MonitorWidget extends ReactWidget {
     (this.focusNode || this.node).focus();
   }
 
+  protected override onAfterShow(msg: Message): void {
+    super.onAfterShow(msg);
+    this.update();
+  }
+
   protected onFocusResolved = (element: HTMLElement | undefined) => {
     if (this.closing || !this.isAttached) {
       return;
diff --git a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx
index 12142f65..2ddd2c56 100644
--- a/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx
+++ b/arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx
@@ -17,7 +17,7 @@ export class SerialMonitorOutput extends React.Component<
    * Do not touch it. It is used to be able to "follow" the serial monitor log.
    */
   protected toDisposeBeforeUnmount = new DisposableCollection();
-  private listRef: React.RefObject<any>;
+  private listRef: React.RefObject<List>;
 
   constructor(props: Readonly<SerialMonitorOutput.Props>) {
     super(props);
@@ -34,12 +34,10 @@ export class SerialMonitorOutput extends React.Component<
       <List
         className="serial-monitor-messages"
         height={this.props.height}
-        itemData={
-          {
-            lines: this.state.lines,
-            timestamp: this.state.timestamp,
-          } as any
-        }
+        itemData={{
+          lines: this.state.lines,
+          timestamp: this.state.timestamp,
+        }}
         itemCount={this.state.lines.length}
         itemSize={18}
         width={'100%'}
@@ -93,11 +91,11 @@ export class SerialMonitorOutput extends React.Component<
     this.toDisposeBeforeUnmount.dispose();
   }
 
-  scrollToBottom = ((): void => {
+  private readonly scrollToBottom = () => {
     if (this.listRef.current && this.props.monitorModel.autoscroll) {
       this.listRef.current.scrollToItem(this.state.lines.length, 'end');
     }
-  }).bind(this);
+  };
 }
 
 const _Row = ({