stage 10

awesome_owl/static/src/todo_list/todo_list.js

@@ -2,6 +2,8 @@
 
 import { Component, useState } from "@odoo/owl";
 import { TodoItem } from "./todo_item";
+import "../utils.js";
+import { useAutofocus } from "../utils.js";
 
 export class TodoList extends Component {
     static template = "awesome_owl.todo_list";
@@ -9,6 +11,7 @@ export class TodoList extends Component {
 
     setup() {
         this.todos = useState([]);
+        useAutofocus('todo_input');
     }
 
     addTodo(ev) {

awesome_owl/static/src/todo_list/todo_list.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.todo_list">
-       <p><input type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
+       <p><input t-ref="todo_input" type="text" name="new-todo" placeholder="Add new todo" t-on-keyup="addTodo" /></p>
        <div class="d-inline-block border p-2 m-2">
             <t t-foreach="todos" t-as="todo" t-key="todo.id">
                 <TodoItem todo="todo" />

awesome_owl/static/src/utils.js

@@ -0,0 +1,10 @@
+/** @odoo-module */
+
+import { useRef, onMounted } from "@odoo/owl";
+
+export function useAutofocus(name) {
+    const ref = useRef(name);
+    onMounted(() => {
+        ref.el.focus();
+    });
+}