A container positioned relative to an anchor; outside the flow of the document.
Remember,
Popoverwill render theanchorin a block element. Wrap it in aninline-blockelement to prevent the Popover from positioning relative to a block level element.
{() => {
const Container = createComponent(
() => ({
height: 100,
textAlign: 'center',
width: '100%',
}),
'div',
)
const InlineContainer = createComponent(
() => ({
display: 'inline-block',
}),
'div',
)
const PaperContents = createComponent(
() => ({
display: 'block',
width: 200,
}),
'div',
)
return (
<SpacedGroup direction="vertical">
{Object.values(placements).map(placement => (
<Container key={placement}>
<InlineContainer>
<Popover
anchor={<IconButton icon={InfoIcon} />}
disableScrim={true}
open={true}
placement={placement}
>
<Paper>
<PaperContents>{placement}
</Paper>
</Popover>
</InlineContainer>
</Container>
))}
</SpacedGroup>
)
}}
</Playground>onClickOutside Event Handler{() => {
class StateManager extends React.Component {
constructor() {
super()
this.state = {
open: false,
}
this.close = this.close.bind(this)
this.open = this.open.bind(this)
}
close() {
this.setState({ open: false })
}
open() {
this.setState({ open: true })
}
render() {
return (
<SpacedGroup>
<Popover
anchor={<IconButton icon={InfoIcon} onClick={this.open} />}
onClickOutside={this.close}
open={this.state.open}
placement="bottom-end"
>
<List bordered>
<ListItem onClick={() => {}}>
<ListItemText primary="Action 1" />
<ListItem onClick={() => {}}>
<ListItemText primary="Action 2" />
</ListItem>
</List>
</Popover>
</SpacedGroup>
)
}
}
return <StateManager />
}}
</Playground>