Set focus on send field initially

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx

@@ -96,7 +96,7 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
     }
 
     protected renderAutoScrollButton(): React.ReactNode {
-        return <React.Fragment>
+        return <React.Fragment key='autoscroll-toolbar-item'>
             <div
                 title='Toggle Autoscroll'
                 className={`item enabled fa fa-angle-double-down arduino-monitor ${this.model.autoscroll ? 'toggled' : ''}`}
@@ -111,7 +111,7 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
     }
 
     protected renderTimestampButton(): React.ReactNode {
-        return <React.Fragment>
+        return <React.Fragment key='line-ending-toolbar-item'>
             <div
                 title='Toggle Timestamp'
                 className={`item enabled fa fa-clock-o arduino-monitor ${this.model.timestamp ? 'toggled' : ''}`}

arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

@@ -25,6 +25,9 @@ export namespace SerialMonitorSendField {
 }
 
 export class SerialMonitorSendField extends React.Component<SerialMonitorSendField.Props, SerialMonitorSendField.State> {
+
+    protected inputField: HTMLInputElement | null;
+
     constructor(props: SerialMonitorSendField.Props) {
         super(props);
         this.state = { value: '' };
@@ -33,10 +36,22 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    componentDidMount() {
+        if (this.inputField) {
+            this.inputField.focus();
+        }
+    }
+
     render() {
         return <React.Fragment>
             <form onSubmit={this.handleSubmit}>
-                <input type='text' id='serial-monitor-send' autoComplete='off' value={this.state.value} onChange={this.handleChange} />
+                <input
+                    tabIndex={-1}
+                    ref={ref => this.inputField = ref}
+                    type='text' id='serial-monitor-send'
+                    autoComplete='off'
+                    value={this.state.value}
+                    onChange={this.handleChange} />
                 <input className="btn" type="submit" value="Submit" />
             </form>
         </React.Fragment>

arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

@@ -47,7 +47,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
     render(): React.ReactNode {
         const tooltip = <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>;
         const items = [
-            <React.Fragment>
+            <React.Fragment key={this.props.side + '-arduino-toolbar-tooltip'}>
                 {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
             </React.Fragment>
         ]
@@ -103,6 +103,7 @@ export class ArduinoToolbar extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <ArduinoToolbarComponent
+            key='arduino-toolbar-component'
             side={this.side}
             items={[...this.items.values()]}
             commands={this.commands}