question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TopAppBarNavigationIcon] Icon is not unselected in Chrome

See original GitHub issue

Bug 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

  1. Go to https://codepen.io/maracuja-juice/pen/byRwPW
  2. Click on the menu button
  3. 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

image

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:closed
  • Created 4 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
williamernestcommented, May 17, 2019

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.

0reactions
moog16commented, May 20, 2019

This is a native behavior that doesn’t need to be documented. Thanks for opening. Closing 😃

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found