~emersion/gamja

dee9e06b2f312c455a9ad614e7a189f91141faee — Simon Ser 4 months ago 7b11b10
connect-form: focus nickname input
1 files changed, 9 insertions(+), 2 deletions(-)

M components/connect-form.js
M components/connect-form.js => components/connect-form.js +9 -2
@@ 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 {
	state = {


@@ 11,6 11,7 @@ export default class ConnectForm extends Component {
		realname: "",
		autojoin: "",
	};
	nickInput = createRef();

	constructor(props) {
		super(props);


@@ 73,6 74,12 @@ export default class ConnectForm extends Component {
		this.props.onSubmit(params);
	}

	componentDidMount() {
		if (this.nickInput.current) {
			this.nickInput.current.focus();
		}
	}

	render() {
		let disabled = this.props.connecting;



@@ 133,7 140,7 @@ export default class ConnectForm extends Component {

				<label>
					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>
				<br/><br/>