From c59650fc3f0a20df6ec092d050dff3e93639ff1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 27 Oct 2022 09:56:02 +0000
Subject: [PATCH] [IMP] web: some autocomplete improvements

This commit introduces two small improvements to the autocomplete
component:
- the ability to autofocus the input, once it is mounted
- the ability to set an additional class to its root element

closes odoo/odoo#115142

Signed-off-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../static/src/core/autocomplete/autocomplete.js |  8 ++++++--
 .../src/core/autocomplete/autocomplete.xml       |  2 +-
 .../web/static/tests/core/autocomplete_tests.js  | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/core/autocomplete/autocomplete.js b/addons/web/static/src/core/autocomplete/autocomplete.js
index 0e51f26d251..e2de3f4dcd8 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.js
+++ b/addons/web/static/src/core/autocomplete/autocomplete.js
@@ -1,10 +1,9 @@
 /** @odoo-module **/
 
-import { useForwardRefToParent, useService } from "@web/core/utils/hooks";
+import { useAutofocus, useForwardRefToParent, useService } from "@web/core/utils/hooks";
 import { useDebounced } from "@web/core/utils/timing";
 import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
 import { usePosition } from "@web/core/position_hook";
-
 import { Component, useExternalListener, useRef, useState } from "@odoo/owl";
 
 export class AutoComplete extends Component {
@@ -22,6 +21,9 @@ export class AutoComplete extends Component {
         });
 
         this.inputRef = useForwardRefToParent("input");
+        if (this.props.autofocus) {
+            useAutofocus({ refName: "input" });
+        }
         this.root = useRef("root");
         this.debouncedOnInput = useDebounced(this.onInput, this.constructor.timeout);
         useExternalListener(window, "scroll", this.onWindowScroll, true);
@@ -322,6 +324,8 @@ Object.assign(AutoComplete, {
         onBlur: { type: Function, optional: true },
         onFocus: { type: Function, optional: true },
         input: { type: Function, optional: true },
+        autofocus: { type: Boolean, optional: true },
+        class: { type: String, optional: true },
     },
     defaultProps: {
         placeholder: "",
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.xml b/addons/web/static/src/core/autocomplete/autocomplete.xml
index 260ff7f1e91..9f22692eabc 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.xml
+++ b/addons/web/static/src/core/autocomplete/autocomplete.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.AutoComplete" owl="1">
-        <div class="o-autocomplete dropdown" t-ref="root">
+        <div class="o-autocomplete dropdown" t-ref="root" t-att-class="props.class">
             <input
                 type="text"
                 t-att-id="props.id"
diff --git a/addons/web/static/tests/core/autocomplete_tests.js b/addons/web/static/tests/core/autocomplete_tests.js
index 908a166e1fe..06a77b78d42 100644
--- a/addons/web/static/tests/core/autocomplete_tests.js
+++ b/addons/web/static/tests/core/autocomplete_tests.js
@@ -338,4 +338,20 @@ QUnit.module("Components", (hooks) => {
         assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "t");
         assert.containsNone(target, ".o-autocomplete--dropdown-menu");
     });
+
+    QUnit.test("autofocus=true option work as expected", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                autofocus="true"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+
+        assert.strictEqual(target.querySelector(".o-autocomplete input"), document.activeElement);
+    });
 });