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

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.

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.