[IMP] awesome_owl: add auto focus hook on todolist text input

Author: msho-odoo

awesome_owl/static/src/card.xml

@@ -14,4 +14,4 @@
         </div>
     </t>
 
-</templates>
+</templates>

awesome_owl/static/src/counter.xml

@@ -9,4 +9,4 @@
         </div>
     </t>
 
-</templates>
+</templates>

awesome_owl/static/src/playground.xml

@@ -11,4 +11,4 @@
         <TodoList/>
     </t>
 
-</templates>
+</templates>

awesome_owl/static/src/todoitem.js

@@ -2,22 +2,7 @@ import { Component, useState } from "@odoo/owl";
 
 export class TodoItem extends Component {
     static template = "awesome_owl.todoitem";
-
-    setup() {
-        this.state = useState({
-            todos: [],
-            idCounter: 0
-        });
-    };
-
-    addTodo(ev) {
-        if (ev.keyCode === 13) {
-            this.state.idCounter++
-            console.log(this.state.idCounter);
-            this.state.todos.push({
-                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
-            });
-            ev.target.value = "";
-        }
+    static props = {
+        todo: Object
     }
 }

awesome_owl/static/src/todoitem.xml

@@ -2,15 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todoitem">
-        <br/>
-        <input t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
-        <t t-foreach="state.todos" t-as="i" t-key="i.id">
-            <div style="border: 1px solid black">
-                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
-                    <t t-out="i.id+'. '+i.description"/>
-                </div>
-            </div>
-        </t>
+        <t t-out="props.todo.id+'. '+props.todo.description"/>
     </t>
 
-</templates>
+</templates>

awesome_owl/static/src/todolist.js

@@ -1,7 +1,30 @@
-import { Component } from "@odoo/owl";
+import { Component, useState, useRef, onMounted } from "@odoo/owl";
 import { TodoItem } from "./todoitem";
+import { useAutofocus } from "./utils";
 
 export class TodoList extends Component {
     static template = "awesome_owl.todolist";
     static components = { TodoItem };
+
+    setup() {
+        this.state = useState({
+            todos: [],
+            idCounter: 0
+        });
+        useAutofocus("input_todo");
+        // this.inputRef = useRef("input_todo");
+        // onMounted(() => {
+        //     this.inputRef.el.focus();
+        // })
+    };
+
+    addTodo(ev) {
+        if (ev.keyCode === 13) {
+            this.state.idCounter++
+            this.state.todos.push({
+                'id': this.state.idCounter, 'description': ev.target.value, 'isCompleted': false
+            });
+            ev.target.value = "";
+        }
+    };
 }

awesome_owl/static/src/todolist.xml

@@ -2,7 +2,15 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.todolist">
-        <TodoItem/>
+        <br/>
+        <input t-ref="input_todo" t-on-keyup="ev => this.addTodo(ev)" type="text" placeholder="Enter a new task"/>
+        <t t-foreach="state.todos" t-as="i" t-key="i.id">
+            <div style="border: 1px solid black">
+                <div t-att-class="{'text-muted': i.isCompleted, 'text-decoration-line-through': i.isCompleted}">
+                    <TodoItem todo= "i"/>
+                </div>
+            </div>
+        </t>
     </t>
 
-</templates>
+</templates>

awesome_owl/static/src/utils.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "@odoo/owl";
+
+export function useAutofocus(refName) {
+  let ref = useRef(refName);
+  useEffect(
+    (el) => el && el.focus(),
+    () => [ref.el]
+  );
+}