First menu item focused on menu open

[hpbl]

Hello, everytime I open the menu, the first item is already focused, is there a way to keep this from happening?

I don't want to disable the focus outline for accessibility reasons, but I also don't want to show the outline out of the box everytime the menu is opened.

Thanks.

[negomi]

Hey @hpbl, that was a recent addition so that keyboard navigation will work with the menu (for accessibility reasons).

If you don't want this behavior, you could unfocus the element using the onStateChange prop and passing this in a callback:

handleStateChange(newState) {
  window.setTimeout(() => { // This is necessary to force the blur to happen after in the event loop
    if (newState.isOpen) {
      document.activeElement.blur();
    }
  });
}

[jsandlerus]

@negomi do you have a way to apply this using react?

[negomi]

Hey @jsandleraol,

Yes, you would define a function like the above, and then pass it to the menu component like so:

<Menu onStateChange={handleStateChange} />

If you're using a class component and defining the handleStateChange callback as a method instead, there are a few different ways you can make it work. This article has more info: https://reactjs.org/docs/faq-functions.html

[jsandlerus]

Thank you, I meant if you knew a way of applying document.activeElement.blur() on react as I have searched for ways of applying this on React but no luck so far.

[negomi]

Oh I see, for a more React-y way to do this you could use the onFocus prop on your first menu item like this:

onFocus={e => e.target.blur()}

[jsandlerus]

Yess!!! That's what I was looking for. Thank you so much!!