File

core/common/dropdown-focus-trap.directive.ts

Description

Directive to manage focus trapping and keyboard navigation for ngx-bootstrap dropdowns with container="body".

Problem

When a dropdown is appended to the body using container="body", the standard cdkTrapFocus directive doesn't work because the dropdown content is outside the normal DOM hierarchy where the directive is applied.

Solution

This directive:

• Detects when a dropdown with container="body" opens
• Programmatically creates a CDK focus trap on the body-appended dropdown menu element
• Traps Tab/Shift+Tab navigation within the dropdown menu
• Automatically closes dropdown and restores focus to toggle button when user selects an item with Enter/Space
• Prevents ESC key from propagating to parent elements (e.g., modals, drawers) and restores focus on close
• Cleans up all listeners when the dropdown closes

Usage

Simply apply this directive to the same element that has the dropdown directive:

<div dropdown container="body" c8yDropdownFocusTrap #myDropdown="bs-dropdown">
  <button dropdownToggle>Select option</button>
  <div *dropdownMenu class="dropdown-menu">
    <c8y-list-group role="list">
      <c8y-li tabindex="0" role="listitem">Option 1</c8y-li>
      <c8y-li tabindex="0" role="listitem">Option 2</c8y-li>
    </c8y-list-group>
  </div>
</div>

Features

• Focus trapping: Tab key navigation cycles through dropdown items
• Automatic focus management: Enter/Space automatically closes dropdown and returns focus to toggle button
• ESC key isolation: Pressing ESC closes only the dropdown, not parent modals/drawers, and restores focus
• Form-friendly: Skips automatic close for inputs, textareas, and selects within the dropdown
• Automatic cleanup: All listeners and focus trap removed when dropdown closes
• Zero configuration: Just add the directive, no manual focus management needed

See CDK FocusTrap

Implements

OnDestroy