[FIX] web: searchbar: focus first item

Doesn't focus hovered option in the searchbar

Before this commit:
When typing in the searchbar while having the cursor right under it,
the selected option was automatically the one hovered by the cursor.

Now, the default option is the first one (typically name search) and the
cursor hovering only takes effect when moved for the first time.

Task 2058656

closes odoo/odoo#36099

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

1 files changed, 11 insertions, 1 deletions

diff --git a/addons/web/static/src/js/widgets/auto_complete.js b/addons/web/static/src/js/widgets/auto_complete.js
index 883206ae4c2..081322f7b1d 100644
--- a/addons/web/static/src/js/widgets/auto_complete.js
+++ b/addons/web/static/src/js/widgets/auto_complete.js
@@ -127,12 +127,22 @@ return Widget.extend({
             var $item = self.make_list_item(result).appendTo($list);
             result.$el = $item;
         });
+        // IE9 doesn't support addEventListener with option { once: true }
+        this.el.onmousemove = function (ev) {
+            self.$('li').each(function (index, li) {
+                li.onmouseenter = self.focus_element.bind(self, $(li));
+            });
+            var targetFocus = ev.target.tagName === 'LI' ?
+                ev.target :
+                ev.target.closest('li');
+            self.focus_element($(targetFocus));
+            self.el.onmousemove = null;
+        };
         this.show();
     },
     make_list_item: function (result) {
         var self = this;
         var $li = $('<li>')
-            .hover(function () {self.focus_element($li);})
             .mousedown(function (ev) {
                 if (ev.button === 0) { // left button
                     self.select(ev, {item: {facet: result.facet}});