[TopAppBarNavigationIcon] Icon is not unselected in Chrome
See original GitHub issueBug report
The navigation icon is not unselected when clicking twice on it. This only happens in Chrome. Couldn’t reproduce in Firefox and Safari.
Steps to reproduce
- Go to https://codepen.io/maracuja-juice/pen/byRwPW
- Click on the menu button
- Click on the menu button again
Actual behavior
The button is in a clicked state.
Expected behavior
The button isn’t in a clicked state.
Screenshots
Your Environment:
Software | Version(s) |
---|---|
MDC Web | latest as of right now |
Browser | Chrome 74.0.3729.157 |
Operating System | macOS Mojave |
Possible solution
This probably happens because the mdc-ripple-upgraded--background-focused
class is not correctly removed.
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
MDC Web TopAppBar not properly working beside Permanent ...
I'm trying to have a permanent drawer (not below the top app bar), and a scrollable part ...
Read more >Working with the AppBar - Android Developers
Note: When handling the Navigation icon using the Toolbar API, the default activity behavior is not triggered. You can use requireActivity().
Read more >Exploring Jetpack Compose: TopAppBar | by Joe Birch
In this article we're going to take a look at the Top App Bar component which ... navigationIcon — the icon to be...
Read more >Use the Google bar - Google Account Help
You can use the Google bar to get to the Google apps you use most, receive app notifications, and manage your Google account....
Read more >Composable App Bar - Brian Gardner
Implementing an app bar is the job of the TopAppBar component. ... To add the icon to the TopAppBar , the navigationIcon parameter...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You could listen to the menu closed event and set the focus on the body (which is what safari does). A timeout could also work.
The native behavior of a button (on some browsers such as Chrome and Firefox) is to retain focus when clicked. We don’t explicitly set focus on any element when the menu is closed. That’s the behavior that occurs when you click a button and we defer to whatever the browser default behavior is.
This is a native behavior that doesn’t need to be documented. Thanks for opening. Closing 😃