Provide `ref` function to access the menu?

Context: I would like to blur the menu when a selection is made, because the design for the focused state of our menu looks very “active”.

Is it possible to provide a ref function to access the menu’s focusable DOM element? I’m not sure if this would be tricky given the implementation of the library or not. Ideally I would be able to just call .blur() (or .focus(), etc.) on the menu whenever I’d like using a Ref.

Right now, I am doing this by:

import * as M from 'react-aria-menubutton'

...

    <M.Wrapper
        {...wrapperProps}
        onSelection={(selected: KeyType) => {
          onSelection(selected)

          // Blur the menu after selecting. we don't have a way to
          // get a ref for the menu, so this will have to do
          if (blurOnSelection) {
            // @ts-ignore
            document.activeElement &&
            // @ts-ignore
            document.activeElement.blur &&
            // @ts-ignore
            typeof document.activeElement.blur  === 'function' &&
            // @ts-ignore
            document.activeElement.blur()
          }
        }}
    >

[vutran]

Context: I would like to blur the menu when a selection is made, because the design for the focused state of our menu looks very “active”.

This seems like it can be addressed by separating the active and focused state in the design instead of exposing the ref escape hatch. Additionally, the examples provided on w3 all keep the focus state on selection.

[ekilah]

It’s possible it’s not ARIA-favorable behavior to unfocus the menu on selection, but I think generally speaking it would be valuable to expose a ref from this library for focus state management.