IconButton retains 'focused' class

[Escalion]

IconButton does not 'blur' when it loses focus, retaining it's --background-focused class after the mouse or touch leaves the item.

[Escalion]

<script>
  import Menu, {
    SelectionGroup,
    SelectionGroupIcon
  } from '@smui/menu';

  import {
    Anchor
  } from '@smui/menu-surface';

  import List, {
    Item,
    Separator,
    Text,
    PrimaryText,
    SecondaryText,
    Graphic
  } from '@smui/list';

  import IconButton from '@smui/icon-button';

  let menu;
  let anchor;

  export let clicked = 'nada';

  let closeMenu = function (){
    menu.setOpen(false)
  }
</script>
<div use:Anchor bind:this={anchor}>
<IconButton class="material-icons" on:click={()=> menu.setOpen(true)}>menu</IconButton>
<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'}><Text>Menu Item</Text></Item>
    <Separator />
    <!-- Specific to view menu items here -->
  </List>
</Menu>
</div>

You can see in this example I add handler to close the menu too, but this snippet recreates the issue.

[Escalion]

Modifying the IconButton invocation to:
<IconButton class="material-icons" on:mouseleave={blur} on:focusout={blur} on:click={()=> menu.setOpen(true)}>menu</IconButton>
and adding the following function to the script tag:

let blur = function(ev) {
      ev.target.blur()
  }

Gives ALMOST the expected result.
When you defocus by 'clicking away' it seems to work, however when you click the menu item, it's back to square one.

[hperrin]

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.

[seaburrows]

I believe we see the same effect on any button so long as the ripple prop is not false.

<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.
Focus is retained on - or returned to - the button, but since there is no ripple effect on that demo, it is less obvious.

Also, depending on the menu use case, you may want to set your focus somewhere specific after the menu is used.
Here is an example:

// 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 😄

[hperrin]

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.