-
-
Notifications
You must be signed in to change notification settings - Fork 515
Fix serial monitor not auto-scrolling to bottom #1889
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
CLA assistant check
All committers have signed the CLA.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @sfe-SparkFro! I tested the PR build and verified it does fix #1736
maujabur
commented
Feb 22, 2023
I tested the Windows_X86-64_zip and it works perfect over here.
Is there anything else I could do or need to do?
Thanks for your work
@per1234 Is this ready to be merged, or is something preventing that? Curious when this will make it to a release version, because I'm currently daily driving this PR, but now I'm getting pestered to update to 2.0.4 😛 Thanks!
With the proposed changes, scrollToBottom happens twice:
- when the IDE2 frontend receives a message from the monitor:
- when the widget updates:
I would prefer having one update that works correctly. Does my proposed change 👇 fix the issue on your side?
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 13618020..12142f65 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 })
1736.mp4
I created a PR: #1928
Closing as superseded by #1928. Thanks again @sfe-SparkFro.
Motivation
The serial monitor auto-scroll doesn't go all the way down, as discussed in #1736
Change description
componentDidUpdate()has been added to the serial monitor code, which callsscrollToBottom(). This ensures the serial monitor goes to the bottom whenever new messages are received.Other information
I have very little experience with React and TypeScript, so this may not be the best solution. But it works on my end, and no one else seemed to be working on this bug.
Reviewer checklist