[FIX] web,*: adapt autocomplete dropdowns after jquery update

*partner_autocomplete,test_main_flows

In jQuery 3, the active element in autocomplete dropdowns is no
longer identified with class 'ui-state-focus' on the <li/>, but
with class 'ui-state-active' is on its child <a/>. Moreover, the
background color of the active element is now set on the <a/>
instead of the <li/>.

This rev. adapts scss rules accordingly, and selectors in the
main_flow_tour.

Issue reported on the jquery update pad.

closes odoo/odoo#31693

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

4 files changed, 20 insertions, 25 deletions

diff --git a/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss b/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss
index d70477e7cb3..e62c4621a5a 100644
--- a/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss
+++ b/addons/partner_autocomplete/static/src/scss/partner_autocomplete.scss
@@ -40,7 +40,7 @@
             }
         }
     }
-    > .ui-menu-item.ui-state-focus .text-muted {
+    > .ui-menu-item > a.ui-state-active .text-muted {
         color: white !important;
     }
 }
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 226d1e8dbf9..82f053a535e 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -17,20 +17,15 @@
             color: $dropdown-link-color;
 
             @extend %dropdown-li-a-padding;
-        }
 
-        &.ui-state-focus {
-            background-image: none;
-            background-color: $o-brand-odoo;
-            border: none;
-            font-weight: normal;
-            margin: 0;
+            &.ui-state-active {
+                border: none;
+                font-weight: normal;
+                margin: 0;
+            }
         }
         &.o_m2o_dropdown_option {
-            padding-left: 20px;
-            > a {
-                color: $o-brand-odoo;
-            }
+            text-indent: 20px
         }
     }
 }
@@ -56,7 +51,7 @@
         > * {
             position: relative; // to allow absolute positionning inside the items
         }
-        
+
         .dropdown-item {
             &:focus, &:active, &:focus:active {
                 outline: none;
@@ -86,4 +81,4 @@
     .dropdown-menu {
         left: auto;
     }
-}
\ No newline at end of file
+}
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index ca57d9561f2..f2f682e055f 100644
--- a/addons/web/static/src/scss/dropdown_extra.scss
+++ b/addons/web/static/src/scss/dropdown_extra.scss
@@ -1,13 +1,13 @@
 .ui-autocomplete .ui-menu-item {
-    &.ui-state-focus {
+    > a.ui-state-active {
         background-color: $o-brand-odoo;
+        color: white;
     }
     &.o_m2o_dropdown_option > a {
         color: $o-brand-odoo;
-    }
-    &.ui-state-focus > a,
-    &.ui-state-focus.o_m2o_dropdown_option > a {
-        color: white;
+        &.ui-state-active {
+            color: white;
+        }
     }
 }
 
diff --git a/odoo/addons/test_main_flows/static/src/js/tour.js b/odoo/addons/test_main_flows/static/src/js/tour.js
index b41ee36cdf8..1f8d512faac 100644
--- a/odoo/addons/test_main_flows/static/src/js/tour.js
+++ b/odoo/addons/test_main_flows/static/src/js/tour.js
@@ -68,13 +68,13 @@ tour.register('main_flow_tour', {
 }, {
     trigger: ".o_field_widget[name=taxes_id] input",
     content: _t("Focus on customer taxes field."),
-    run: function(actions) {
+    run: function (actions) {
         actions.click();
-        var $e = $(".ui-menu-item.ui-state-focus:not(.o_m2o_dropdown_option)");
+        var $e = $('.ui-menu-item:not(.o_m2o_dropdown_option) > a.ui-state-active');
         if ($e.length) {
             actions.click($e);
         } else {
-            actions.click();    // close dropdown
+            actions.click(); // close dropdown
         }
     },
 }, {
@@ -233,13 +233,13 @@ tour.register('main_flow_tour', {
 }, {
     trigger: ".o_field_widget[name=taxes_id] input",
     content: _t("Focus on customer taxes field."),
-    run: function(actions) {
+    run: function (actions) {
         actions.click();
-        var $e = $(".ui-menu-item.ui-state-focus:not(.o_m2o_dropdown_option)");
+        var $e = $('.ui-menu-item:not(.o_m2o_dropdown_option) > a.ui-state-active');
         if ($e.length) {
             actions.click($e);
         } else {
-            actions.click();    // close dropdown
+            actions.click(); // close dropdown
         }
     },
 }, {