[IMP] awesome_owl: Add input auto-focus using t-ref and useRef

• Implemented t-ref and useAutofocus to reference the input field.
• Extracted logic into a useAutofocus hook for better reusability.

awesome_owl/static/src/todo_list/todo_list.js

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

awesome_owl/static/src/todo_list/todo_list.xml

@@ -5,7 +5,7 @@
             <div class="card-body">
                 <h5 class="card-title text-primary">Todo List</h5>
                 <div class="list-group">
-                <input class="form-control mb-3" type="text" placeholder="Add a todo" t-on-keyup="addTodo"/>
+                <input class="form-control mb-3" type="text" placeholder="Add a todo" t-on-keyup="addTodo" t-ref="input"/>
                     <t t-foreach="todos" t-as="todo" t-key="todo.id">
                         <div class="list-group-item border-0">
                             <TodoItem todo="todo"/>

awesome_owl/static/src/utils.js

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