in src/stories/ActionMenu2/fixtures.stories.tsx [500:540]
export function OverlayProps(): JSX.Element {
const [open, setOpen] = React.useState(false)
const inputRef = React.createRef<HTMLInputElement>()
return (
<>
<h1>OverlayProps</h1>
<p>
Disable `onClickOutside` and `onEscape`. Only way to close is to select an action which takes focus on a
TextInput
</p>
<ActionMenu open={open} onOpenChange={setOpen}>
<ActionMenu.Button>Menu</ActionMenu.Button>
<ActionMenu.Overlay
width="large"
onClickOutside={() => {
/* do nothing, keep it open*/
}}
onEscape={() => {
/* do nothing, keep it open*/
}}
returnFocusRef={inputRef}
>
<ActionList>
<ActionList.Item>Option 1</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
<ActionList.Item>Option 2</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
<br />
<br />
<TextInput type="text" ref={inputRef} placeholder="random input to return focus to" />
</>
)
}