jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-15 07:16:38 +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();
}
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>> {
return [
{
@ -121,7 +130,9 @@ export class MonitorWidget extends ReactWidget {
return <div className='serial-monitor-container'>
<div className='head'>
<div className='send'>
<SerialMonitorSendField onSend={this.onSend} />
<SerialMonitorSendField
resolveFocus={this.onFocusResolved}
onSend={this.onSend} />
</div>
<div className='config'>
<ArduinoSelect
@ -162,7 +173,8 @@ export class MonitorWidget extends ReactWidget {
export namespace SerialMonitorSendField {
export interface Props {
readonly onSend: (text: string) => void
readonly onSend: (text: string) => void;
readonly resolveFocus: (element: HTMLElement | undefined) => void;
}
export interface State {
value: string;
@ -171,8 +183,6 @@ 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: '' };
@ -181,17 +191,11 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
if (this.inputField) {
this.inputField.focus();
}
}
render() {
return <React.Fragment>
<input
tabIndex={-1}
ref={ref => this.inputField = ref}
ref={this.setRef}
id='serial-monitor-send'
type='text'
autoComplete='off'
@ -201,6 +205,12 @@ export class SerialMonitorSendField extends React.Component<SerialMonitorSendFie
</React.Fragment>
}
protected setRef = (element: HTMLElement | null) => {
if (this.props.resolveFocus) {
this.props.resolveFocus(element || undefined);
}
}
protected handleChange(event: React.ChangeEvent<HTMLInputElement>) {
this.setState({ value: event.target.value });
}