[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>

2 files changed, 13 insertions, 18 deletions

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;
+        }
     }
 }