materialize: [ Navbar Dropdown Menu ] focus bug when hovering over dropdown items
Context
It seems that there is an issue which shows an ugly black/white border when hovering over and then out of a dropdown element which is defined within a navigation bar. It seems that this has something to do with focusing in and out of the dropdown trigger.
I have attached a screenshot which shows the border:
Steps to Reproduce (for bugs)
- Using the following code (as documented on https://materializecss.com/navbar.html#navbar-dropdown) :
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
- Using the following options for the DropDown initialisation:
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.dropdown-trigger');
let options = {
hover: true,
coverTrigger: false,
}
let instances = M.Dropdown.init(elems, options);
})
-
Hover over and out of the dropdown element.
-
Within the developer-console, adding the
:focus
state to the<li>
, which surrounds the Dropdown Trigger, will result to the same behaviour.
Your Environment
- Version used: This issue occurred to me in both
"@materializecss/materialize": "^1.0.0"
and the CDN stated in the documentation (https://materializecss.com/getting-started.html). - Browser Name and version: Google Chrome Version 88.0.4324.182 (Official Build) (64-bit)
- Operating System and version (desktop or mobile): Linux Mint 20
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (6 by maintainers)
@Smankusors thanks for your solution. The following override works as a (temporarily) fix in both Google Chrome and Mozilla Firefox:
The issue is that the focus ring appears on mouse over or out (can’t remember) and stays visible. It should never appear for desktop mouse usage, only on actual focus with the keyboard tab key. Even when someone would want it to appear on a mouse event, it should disappear on mouse out.
Dear @wuda-io, by forking the project and following the contribution guidelines to create a Pull-Request, I get a lot of merge-conflicts on my branch when trying to pull in the upstream
master
branch. The branch itself is created of thev1-dev
because other pull-requests are based on this same branch.It is not clear to me if my branch needs to be created of the
master
orv1-dev
branch.