From abe4a013033c3ebd6b6c83bf0a8a73436e17b7c9 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Fri, 19 Aug 2022 08:11:12 +0000
Subject: [PATCH] [FIX] web: fix autocomplete width being set to that of the
 parent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, the autocomplete's width was set manually to that of the
parent. This is useless because the width is already set by the left: 0
and right: 0 rules in css. These rules are also incorrect, as we don't
want the width of the autocomplete to depend on the size of the input,
it should be able to overflow past the end of the input if necessary to
show the full width of the autocomplete items.

This commit fixes that, and relies on the usePosition hook for position
instead (as the position used to be left: 0 and right: 0)

closes odoo/odoo#98443

Signed-off-by: Michaël Mattiello <mcm@odoo.com>
---
 .../static/src/core/autocomplete/autocomplete.js    | 13 ++-----------
 .../static/src/core/autocomplete/autocomplete.scss  |  5 -----
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/addons/web/static/src/core/autocomplete/autocomplete.js b/addons/web/static/src/core/autocomplete/autocomplete.js
index 549a3c5d145..d863dd259a5 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.js
+++ b/addons/web/static/src/core/autocomplete/autocomplete.js
@@ -5,7 +5,7 @@ import { useDebounced } from "@web/core/utils/timing";
 import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
 import { usePosition } from "@web/core/position_hook";
 
-const { Component, useExternalListener, useRef, useState, useEffect } = owl;
+const { Component, useExternalListener, useRef, useState } = owl;
 
 export class AutoComplete extends Component {
     setup() {
@@ -39,18 +39,9 @@ export class AutoComplete extends Component {
         });
 
         // position and size
-        const sourcesListRef = useRef("sourcesList");
-        useEffect(
-            () => {
-                if (sourcesListRef.el) {
-                    sourcesListRef.el.style.width =
-                        this.inputRef.el.getBoundingClientRect().width + "px";
-                }
-            },
-            () => [sourcesListRef.el]
-        );
         usePosition(() => this.inputRef.el, {
             popper: "sourcesList",
+            position: "bottom-start",
         });
     }
 
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.scss b/addons/web/static/src/core/autocomplete/autocomplete.scss
index 2f186ac15b1..4c1204bd316 100644
--- a/addons/web/static/src/core/autocomplete/autocomplete.scss
+++ b/addons/web/static/src/core/autocomplete/autocomplete.scss
@@ -3,9 +3,4 @@
     .o-autocomplete--input {
         width: 100%;
     }
-
-    .o-autocomplete--dropdown-menu {
-        left: 0;
-        right: 0;
-    }
 }