Focus input field when the create budget window has opened

frontend/src/components/budget-create.ts

@@ -40,6 +40,11 @@ class BudgetCreateComponent extends LitElement {
     `
   }
 
+  firstUpdated() {
+    const nameInputEl = <InputField>this.shadowRoot.getElementById('name')
+    nameInputEl.focusInput()
+  }
+
   updated(changedProperties: Map<string | number | symbol, any>) {
     // If error was turned on, turn it off after a moment
     if (changedProperties.has('hasError')) {

frontend/src/components/input.ts

@@ -56,6 +56,12 @@ export class InputField extends LitElement {
     (<HTMLInputElement>this.shadowRoot.getElementById(this.inputId)).value = ''
   }
 
+  async focusInput() {
+    await this.updateComplete
+    const el = <HTMLInputElement>this.shadowRoot.getElementById(this.inputId)
+    el.focus()
+  }
+
   render() {
     return html`
       <label for="${this.inputId}">${this.label}</label>