From 468096cb6bcfd5a2462f6ae318ed0200c8d30593 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 28 Feb 2023 18:13:54 +0000 Subject: [PATCH] [FIX] web: restore some dropdown styles in the backend Steps to reproduce the bug (in 16.0 and above only): - Go in the backend - Focus the searchbar - Type something and use the arrow to navigate the search dropdown => You cannot see what you are highlighting anymore This occurs since [1] (its forward-ported version) which removed rules that were targeting the frontend dropdowns by mistake while they were indicated as wanting to target OWL dropdowns only. It appears that those rules were actually used by chance in 16.0: to style the searchbar which is not using OWL dropdowns and whose specific 15.0 styles were removed, fallbacking on those erroneous rules. On top of that, the wanted style here concerns a rule about the `focus` class... which is actually not part of Bootstrap 5 anymore but that our old searchbar still uses. There is a high chance that the problem is only confined to the 16.0 searchbar and not anything else. But as a precaution this commit fixes the issue by restoring all the rules that were removed (well, rather moved to be more specific to OWL dropdowns) but inside a backend file only. The legacy/dropdown.scss file seemed very suitable for this purpose. Obviously, those rules should be removed as soon as possible once it will be judged ok in master after a searchbar adaptation. [1]: https://github.com/odoo/odoo/commit/e24bff699190bc511b357c200f4494a177be5b77 closes odoo/odoo#113944 X-original-commit: 77537678d6b6f3533eb0c9d9d37d8fe679ef9580 Signed-off-by: Quentin Smetz (qsm) --- .../web/static/src/legacy/scss/dropdown.scss | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/addons/web/static/src/legacy/scss/dropdown.scss b/addons/web/static/src/legacy/scss/dropdown.scss index e3d0fadb52e..c8e18a22280 100644 --- a/addons/web/static/src/legacy/scss/dropdown.scss +++ b/addons/web/static/src/legacy/scss/dropdown.scss @@ -78,3 +78,36 @@ } } } + +// TODO probably remove those next rules that target dropdown main classes once +// the backend searchbar has been refactored to use OWL dropdown components and +// to stop using the BS4 "focus" class which is not part of BS5 anymore. +// See the commit that introduced this comment for more details. + +.dropdown-menu { + .dropdown-toggle:focus, .dropdown-item:focus { + background-color: transparent; + outline: none; + } + .dropdown-toggle.focus, .dropdown-item.focus { + background-color: $dropdown-link-hover-bg; + } +} + +.dropdown-item:not(.disabled):not(:disabled) { + cursor: pointer; +} + +button.dropdown-toggle { + &.active, &:hover, &:focus, &:active { + outline: none; + box-shadow: none !important; + } + &.dropdown-item { + &::after, &::before { + // Changes the placement of bootstrap dropdown carets for subdropdowns + @include o-position-absolute($right: 0, $top: 0); + transform: translate(-.6em, .6em) #{"/*rtl:translate(.6em, .6em) scaleX(-1)*/"}; + } + } +}