Provides a way to group focusable items and navigate between these groups. This is useful for components that "take the focus" to a new location and then "give it back" once complete. See Drawer for a real-world example.
A FocusGroup is a group of focusable items. It provides the proper event handlers to update focus (onFocus/onBlur), as well as a way to return focus to the previous focus group.
Remember to use the
FocusManageras a parent somewhere in the UI tree.
<FocusManager>
{pop => (
<FocusGroup>
{bind => (
<Fragment>
Not In Focus Group
<TextField focused {...bind} />
<FocusGroup>
{bind => (
<Border>
In Focus Group
<SpacedGroup>
<TextField {...bind} />
<TextField {...bind} />
<TextField {...bind} />
<Button onClick={pop}>Go Back Previous Focus Group
</SpacedGroup>
</Border>
)}
</FocusGroup>
</Fragment>
)}
</FocusGroup>
)}
</FocusManager>
</Playground>