From 84d9cb9271ebff09a0a995a685c55ebd91fa0b96 Mon Sep 17 00:00:00 2001
From: Joseph Caburnay <jcb@odoo.com>
Date: Tue, 3 Jan 2023 16:59:50 +0000
Subject: [PATCH] [IMP] web: auto-select content on focus for autocomplete
 (e.g. m2o) fields

On first focus in an autocomplete field, the text content of the input element
is automatically highlighted.

closes odoo/odoo#109025

Task-id: 3117420
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/components/autocomplete/autocomplete.js     |  8 --------
 .../src/components/autocomplete/autocomplete.xml    |  1 -
 .../static/src/core/autocomplete/autocomplete.js    |  7 +++++++
 .../static/src/core/autocomplete/autocomplete.xml   |  1 +
 addons/web/static/tests/core/autocomplete_tests.js  | 13 +++++++++++++
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/addons/analytic/static/src/components/autocomplete/autocomplete.js b/addons/analytic/static/src/components/autocomplete/autocomplete.js
index 7af2cf9a11a..7f58e0fc0d5 100644
--- a/addons/analytic/static/src/components/autocomplete/autocomplete.js
+++ b/addons/analytic/static/src/components/autocomplete/autocomplete.js
@@ -4,11 +4,3 @@ import { AutoComplete } from "@web/core/autocomplete/autocomplete";
 
 export class AnalyticAutoComplete extends AutoComplete {}
 AnalyticAutoComplete.template = "analytic.AutoComplete";
-AnalyticAutoComplete.props = {
-    ...AutoComplete.props,
-    onFocus: { type: Function, optional: true },
-}
-AnalyticAutoComplete.defaultProps = {
-    ...AutoComplete.defaultProps,
-    onFocus: () => {},
-}
diff --git a/addons/analytic/static/src/components/autocomplete/autocomplete.xml b/addons/analytic/static/src/components/autocomplete/autocomplete.xml
index 5090a90df43..48f59d46f9a 100644
--- a/addons/analytic/static/src/components/autocomplete/autocomplete.xml
+++ b/addons/analytic/static/src/components/autocomplete/autocomplete.xml
@@ -4,7 +4,6 @@
         <xpath expr="//input" position="attributes">
             <attribute name="t-on-click"></attribute>
             <attribute name="t-on-click.stop">onInputClick</attribute>
-            <attribute name="t-on-focus">props.onFocus</attribute>
         </xpath>
     </t>
 </templates>
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.js b/addons/web/static/src/core/autocomplete/autocomplete.js
index c5cbd6fb854..0e51f26d251 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.js
+++ b/addons/web/static/src/core/autocomplete/autocomplete.js
@@ -228,6 +228,11 @@ export class AutoComplete extends Component {
         this.open(true);
     }
 
+    onInputFocus(ev) {
+        this.inputRef.el.setSelectionRange(0, this.inputRef.el.value.length);
+        this.props.onFocus(ev);
+    }
+
     onInputKeydown(ev) {
         const hotkey = getActiveHotkey(ev);
         switch (hotkey) {
@@ -315,6 +320,7 @@ Object.assign(AutoComplete, {
         onInput: { type: Function, optional: true },
         onChange: { type: Function, optional: true },
         onBlur: { type: Function, optional: true },
+        onFocus: { type: Function, optional: true },
         input: { type: Function, optional: true },
     },
     defaultProps: {
@@ -323,6 +329,7 @@ Object.assign(AutoComplete, {
         onInput: () => {},
         onChange: () => {},
         onBlur: () => {},
+        onFocus: () => {},
     },
     timeout: 250,
 });
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.xml b/addons/web/static/src/core/autocomplete/autocomplete.xml
index a0e79b48677..260ff7f1e91 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.xml
+++ b/addons/web/static/src/core/autocomplete/autocomplete.xml
@@ -15,6 +15,7 @@
                 t-on-change="onInputChange"
                 t-on-input="debouncedOnInput"
                 t-on-keydown="onInputKeydown"
+                t-on-focus="onInputFocus"
                 t-ref="input"
             />
             <t t-if="isOpened and hasOptions">
diff --git a/addons/web/static/tests/core/autocomplete_tests.js b/addons/web/static/tests/core/autocomplete_tests.js
index 6d9460b6e3b..908a166e1fe 100644
--- a/addons/web/static/tests/core/autocomplete_tests.js
+++ b/addons/web/static/tests/core/autocomplete_tests.js
@@ -142,6 +142,19 @@ QUnit.module("Components", (hooks) => {
         assert.containsNone(target, ".o-autocomplete--dropdown-menu");
     });
 
+    QUnit.test("select input text on first focus", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete value="'Bar'" sources="[{ options: [{ label: 'Bar' }] }]" onSelect="() => {}"/>
+        `;
+
+        await mount(Parent, target, { env });
+        await triggerEvents(target, ".o-autocomplete--input", ["focus", "click"]);
+        const el = target.querySelector(".o-autocomplete--input");
+        assert.strictEqual(el.value.substring(el.selectionStart, el.selectionEnd), "Bar");
+    });
+
     QUnit.test("scroll outside should close dropdown", async (assert) => {
         class Parent extends Component {}
         Parent.components = { AutoComplete };