Dialog components are commonly used to ask for user explicit interaction. Flair uses
@headlessui/react Dialog under the hood.
Dialog is opened, scroll on the page are automatically locked, and focus are trapped within the
Dialog must have a focusable element inside of it, as it will attempt to focus on the element when the
Clicking anywhere on the overlay will call the
onClose prop to close the
Dialog. Pressing the Esc key also has the same effect.
Manually setting initial focus
In case your
Dialog contains multiple focusable components, initial focus can be manually set by passing a reference to the element via the