Summary
The Popover component makes it easy to display a sheet or popup menu when the
user clicks the React element provided as buttonComponent. In Edgehill, the Popover
component is used to create rich dropdown menus, detail popups, etc. with consistent
look and feel and behavior.
The Popover component handles:
- Rendering it's children when you click
buttonComponent, and dismissing it's children when you click outside the popover or press the Escape key. - Automatically focusing the item with the lowest tabIndex inside the popover
Input Focus
If your Popover contains an input, like a search bar, give it a tabIndex and Popover will automatically focus it when the popover is opened.
Advanced Use
If you don't want to use the Popover in conjunction with a triggering button,
you can manually call open() and close() to display it. A typical scenario
looks like this:
render: =>
<Popover ref="myPopover"> Popover Contents </Popover>
showMyPopover: =>
@refs.myPopover.open()