The Overlay component is the base for building interactions like Modal and Drawer. It contains all the core features necessary for a great experience.
Esc
to dismissImportant: You must have a focusable element inside of the Overlay.
<Button
{{on "click" this.toggle}}
>
Open Overlay
</Button>
<Overlay
@isOpen={{this.isOpen}}
@onClose={{this.toggle}}
as |m|
>
<div class="bg-white p-8">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<Button {{on "click" this.toggle}}>Close</Button>
</div>
</Overlay>
FormSelect
uses Power Select under the hood and has @renderInPlace={{false}}
set by default, which will insert the content of the drop-down outside of the Overlay
(or Drawer
or Modal
) and because of that focus-trap will prevent accessing focusable elements (search input) in said Power Select. To solve this you have following options:
<Overlay @disableFocusTrap={{true}} />
(not recommended)<FormSelect @renderInPlace={{true}} />
(recommended)Arg | Type | Description | Required | Default |
---|---|---|---|---|
isOpen
|
boolean
|
Whether it is open or not | Yes | - |
backdropTransitionName
|
string
|
The name of the transition to be used in the backdrop. | - |
'overlay-transition--fade'
|
closeOnEscapeKey
|
boolean
|
Whether to close when the escape key is pressed | - |
true
|
closeOnOutsideClick
|
boolean
|
Whether to close when the area outside (the backdrop) is clicked | - |
true
|
contentTransitionName
|
string
|
The name of the transition to be used in the content. | - |
'overlay-transition--fade'
|
destinationElementId
|
string
|
The destination where the overlay will be inserted, defaults to `document.body` | - |
undefined
|
didClose
|
() => void
|
A function that will be called when closing is finished executing, this includes waiting for animations/transitions to finish. | - | - |
disableBackdrop
|
boolean
|
Whether to hide the backdrop or not | - |
false
|
disableFocusTrap
|
boolean
|
Whether the focus trap is disabled or not | - |
false
|
disableTransitions
|
boolean
|
Disable css transitions | - |
false
|
focusTrapOptions
|
unknown
|
Focus trap options | - |
{ allowOutsideClick: true }
|
onClose
|
() => void
|
A function that will be called when closed | - | - |
onOpen
|
() => void
|
A function that will be called when opened | - | - |
renderInPlace
|
boolean
|
Whether to render in place or in the specified/default destination | - |
false
|
transitionDuration
|
number
|
Duration of the animation | - |
200
|