[ Navbar Dropdown Menu ] focus bug when hovering over dropdown items about materialize

[JayDijkstra]

@Smankusors thanks for your solution. The following override works as a (temporarily) fix in both Google Chrome and Mozilla Firefox:

li a.dropdown-trigger:focus {
    outline: none;
}

[JayDijkstra]

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 the v1-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 or v1-dev branch.

[rdevroede]

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.

[Smankusors]

is this also reproducible on other browsers such as Firefox?

[JayDijkstra]

@Smankusors in Firefox the border is less visible (white-dashed), but does also occur. It can be reproduced by adding the :focus-visible state, to the <li> parent of the dropdown-trigger, in the developer console.

[JayDijkstra]

What I did forget to mention is that a similar (same) issue has been created in Dogfalo#6051 back in 2018. This comment is just for giving you as much information as I can.

[Smankusors]

I think this come from the browser styling. Perhaps this can be solved by simply removing the outline (which is bad for accessibility), or create own outline style when the element focused.

Temporary, you can add CSS rule like outline: none to remove the built in outline.

[wuda-io]

Hey, nice that you found a solution.
Can you put this in a PR?
Thanks

[wuda-io]

Yes you are right! The correct approach is, to use is the default branch v1-dev, and NOT the master. The documentation needs to be updated.
Thanks for your hint.

[wuda-io]

Sorry, I thought this was a bug. But as @Smankusors and @DanielRuf suggested it is intended behavoir when using keyboard only. Nevertheless, thank you for your contribution in first place. At least we found out that we have to update the docs. Cheers mate.

[Smankusors]

Sorry, I thought this was a bug. But as @Smankusors and @DanielRuf suggested it is intended behavoir when using keyboard only. Nevertheless, thank you for your contribution in first place. At least we found out that we have to update the docs. Cheers mate.

yeah the styling is intended behavior. But when this is applied without using any keyboard is kinda not expected. Unfortunately I can't reproduce this like @JayDijkstra's screenshot without adding :focus state on Chrome 89.

But on Firefox 87.0b9, I got 1px dashed rectangle like he described.

Also I haven't tried to reproduce this on Linux system yet.

[DanielRuf]

See https://caniuse.com/css-focus-visible regarding a better approach. Or some polyfill or some solution like the what-input package.

[DanielRuf]

The "ugly" black border: that is Chrome's / Chromium's new focus ring design and their "fault".
We should never remove it but probably style it differently.

[JayDijkstra]

It seems that this issue only occurs when using the option hover: true on a M.dropdown() element. By disabling this, it seems to resolve this issue for me, however this is only suitable when you actually do not need the hover functionality on our dropdown buttons. Maby this is some valuable information for you.

[LoganTann]

Closing this issue due to inactivity. Feel free to reopen it if needed !