From ff1ddea240da7663381f66a6af0aad098d823938 Mon Sep 17 00:00:00 2001
From: Akos Kitta <a.kitta@arduino.cc>
Date: Fri, 3 Mar 2023 08:41:05 +0100
Subject: [PATCH 1/2] fix: scroll to the bottom after the state update

Closes #1736

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
---
 .../serial/monitor/serial-monitor-send-output.tsx    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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 136180202..12142f654 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
@@ -65,11 +65,13 @@ export class SerialMonitorOutput extends React.Component<
           this.state.charCount
         );
         const [lines, charCount] = truncateLines(newLines, totalCharCount);
-        this.setState({
-          lines,
-          charCount,
-        });
-        this.scrollToBottom();
+        this.setState(
+          {
+            lines,
+            charCount,
+          },
+          () => this.scrollToBottom()
+        );
       }),
       this.props.clearConsoleEvent(() =>
         this.setState({ lines: [], charCount: 0 })

From 656357dcd273a317a49cd87f2c14fce8a35e8289 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 2/2] 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 a5a25230c..ec83f5a0a 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 12142f654..2ddd2c565 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 = ({