connect-form: focus nickname input

This commit is contained in:
Simon Ser 2021-07-04 21:28:45 +02:00
parent 7b11b10955
commit dee9e06b2f

View File

@ -1,4 +1,4 @@
import { html, Component } from "../lib/index.js"; import { html, Component, createRef } from "../lib/index.js";
export default class ConnectForm extends Component { export default class ConnectForm extends Component {
state = { state = {
@ -11,6 +11,7 @@ export default class ConnectForm extends Component {
realname: "", realname: "",
autojoin: "", autojoin: "",
}; };
nickInput = createRef();
constructor(props) { constructor(props) {
super(props); super(props);
@ -73,6 +74,12 @@ export default class ConnectForm extends Component {
this.props.onSubmit(params); this.props.onSubmit(params);
} }
componentDidMount() {
if (this.nickInput.current) {
this.nickInput.current.focus();
}
}
render() { render() {
let disabled = this.props.connecting; let disabled = this.props.connecting;
@ -133,7 +140,7 @@ export default class ConnectForm extends Component {
<label> <label>
Nickname:<br/> Nickname:<br/>
<input type="username" name="nick" value=${this.state.nick} disabled=${disabled} autofocus required/> <input type="username" name="nick" value=${this.state.nick} disabled=${disabled} ref=${this.nickInput} autofocus required/>
</label> </label>
<br/><br/> <br/><br/>