Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.85k stars 4.74k forks source link

Setting a dropdown to work on hover unintentionally triggers focus state. #6656

Open AnupamKhosla opened 2 years ago

AnupamKhosla commented 2 years ago

If you want to open the dropdown on hover you'd do this:

$('.dropdown-button').dropdown({
  coverTrigger: false,
  hover: true, // Activate on hover  
});

Strangely, with this actvated, when you mouseout of the dropdown it leaves the dropdown-trigger in focus state. See this demo: https://jsfiddle.net/v4s5chea/

Moreover using onCloseEnd to blur the dropdown-trigger flickers the focus style. See another demo: https://jsfiddle.net/dg2b3my6/

I don't see a reason why you'd want to trigger focus on a dropdown-trigger link with hover. In my website I am going with default user agent styling for focus-visible(black outline) on links. This shows the black outline only when links are tabbed not when clicked. Basially I wanna keep the black outline for tab focus, but don't want to show this black outline on hover. The current materialize css approach seems to make that next to impossible.