What's the easiest way to make a menu like component that goes away when loses focus?

What’s the easiest way to make a menu like component that goes away when loses focus?

Requirements:

  • Disappears when loses focus
  • Doesn’t reappear when dismissed with button that created it
  • Accepts keyboard input

There may be a more intelligent way to do this, but one technique I used in the past was a text editor that was outside the bounds of component (so would not be displayed) and had it grabKeyboardFocus when displaying the parent component.

I then used the focus lost to dismiss the parent component except when a child component was clicked. Presumably would be trivial to forward any key presses on too.

It ticks all your boxes and did the job for me too, but felt like a bit of a hack, so I’m sure there may be a better solution.