jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-16 15:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed the input focus when the view is activated

Browse Source 
Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2019-12-05 10:33:29 +01:00
parent 6af22ec9b8
commit ed660ccd64
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
View File

@ -88,6 +88,15 @@ export class MonitorWidget extends ReactWidget {
this.update(); this.update();
} }
protected onActivateRequest(msg: Message): void {
super.onActivateRequest(msg);
(this.focusNode || this.node).focus();
}
protected onFocusResolved = (element: HTMLElement | undefined) => {
this.focusNode = element;
}
protected get lineEndings(): OptionsType<SelectOption<MonitorModel.EOL>> { protected get lineEndings(): OptionsType<SelectOption<MonitorModel.EOL>> {
return [ return [
{ {
@ -121,7 +130,9 @@ export class MonitorWidget extends ReactWidget {
return <div className='serial-monitor-container'> return <div className='serial-monitor-container'>
<div className='head'> <div className='head'>
<div className='send'> <div className='send'>
<SerialMonitorSendField onSend={this.onSend} /> <SerialMonitorSendField
resolveFocus={this.onFocusResolved}
onSend={this.onSend} />
</div> </div>
<div className='config'> <div className='config'>
<ArduinoSelect <ArduinoSelect
@ -162,7 +173,8 @@ export class MonitorWidget extends ReactWidget {
export namespace SerialMonitorSendField { export namespace SerialMonitorSendField {
export interface Props { export interface Props {
readonly onSend: (text: string) => void readonly onSend: (text: string) => void;
readonly resolveFocus: (element: HTMLElement | undefined) => void;
} }
export interface State { export interface State {
value: string; value: string;
@ -171,8 +183,6 @@ export namespace SerialMonitorSendField {
export class SerialMonitorSendField extends React.Component<SerialMonitorSendField.Props, SerialMonitorSendField.State> { export class SerialMonitorSendField extends React.Component<SerialMonitorSendField.Props, SerialMonitorSendField.State> {
protected inputField: HTMLInputElement | null;
constructor(props: SerialMonitorSendField.Props) { constructor(props: SerialMonitorSendField.Props) {
super(props); super(props);
this.state = { value: '' }; this.state = { value: '' };
@ -181,17 +191,11 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
} }
componentDidMount() {
if (this.inputField) {
this.inputField.focus();
}
}
render() { render() {
return <React.Fragment> return <React.Fragment>
<input <input
tabIndex={-1} tabIndex={-1}
ref={ref => this.inputField = ref} ref={this.setRef}
id='serial-monitor-send' id='serial-monitor-send'
type='text' type='text'
autoComplete='off' autoComplete='off'
@ -201,6 +205,12 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
</React.Fragment> </React.Fragment>
} }
protected setRef = (element: HTMLElement | null) => {
if (this.props.resolveFocus) {
this.props.resolveFocus(element || undefined);
}
}
protected handleChange(event: React.ChangeEvent<HTMLInputElement>) { protected handleChange(event: React.ChangeEvent<HTMLInputElement>) {
this.setState({ value: event.target.value }); this.setState({ value: event.target.value });
} }