Overlay

The Overlay component is the base for building interactions like Modal and Drawer. It contains all the core features necessary for a great experience.

  • Auto-Focusing
  • Focus Trapping
  • Render in-Place or in-Portal.
  • Press Esc to dismiss
  • Click on the backdrop to dismiss
  • Animations

Important: You must have a focusable element inside of the Overlay.

Examples

<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>

Note on Overlays and other portal elements

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)

API

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