New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IconButton retains 'focused' class #108
Comments
You can see in this example I add handler to close the menu too, but this snippet recreates the issue. |
Modifying the IconButton invocation to:
Gives ALMOST the expected result. |
This is an icon button used as a menu? Hmm. I haven’t considered that case before. Let me do some investigation to see what’s going on. |
I believe we see the same effect on any button so long as the <IconButton ripple={false} class="material-icons" on:click={()=> menu.setOpen(true)}>menu</IconButton> Setting this should resolve your issue, although of course you lose the effect. What would the desirable behaviour be here? The root material components behave the same way. Also, depending on the menu use case, you may want to set your focus somewhere specific after the menu is used. // existing code...
let closeMenu = function (){
menu.setOpen(false)
}
let targetEl;
</script>
// existing code...
<Menu bind:this={menu} anchor={false} bind:anchorElement={anchor} anchorCorner="BOTTOM_LEFT" on:mouseleave={closeMenu} on:focusout={closeMenu}>
<List>
<!-- Common menu items here -->
<Item on:SMUI:action={()=> {
clicked = 'item';
targetEl.focus();
}><Text>Menu Item</Text></Item>
<Separator />
<!-- Specific to view menu items here -->
</List>
</Menu>
<div tabIndex="-1" bind:this={targetEl}></div> Hope this is helpful 😄 |
Since there is a new release (5.0), and this issue was filed prior to that release and hasn't had any updates in at least six months, I'm going to close it as part of a mass issue clean up. If this issue is still relevant, please re-open it and mention me in a comment, and I will triage the issue into a relevant milestone. Thank you for your patience, and I apologize for any inconvenience. |
IconButton does not 'blur' when it loses focus, retaining it's --background-focused class after the mouse or touch leaves the item.
The text was updated successfully, but these errors were encountered: