Basic Usage

The k-focus-capture component traps focus within its children. When focus reaches the end of the focusable elements, it cycles back to the first focusable element. This is useful for modal dialogs, side menus, or any UI where you want to keep focus contained within a specific area.

<k-focus-capture>
  <div class="card">
    <button class="mb">First Button</button>
    <input type="text" placeholder="Input field" class="mb" />
    <button class="mb">Second Button</button>
    <a href="#" class="d-b mb">Link</a>
  </div>
</k-focus-capture>

Dialog Example

FocusCapture is used internally by the Dialog and Aside components. You do not need to add it yourself. Open the dialog below and tab through the elements to see how focus is trapped within the dialog.

<k-dialog id="focusDialog" cancel-text="Close" confirm-text="Submit">
  <h6 slot="title" class="m0 px">Focus Capture Dialog</h6>
  <div class="p">
    <p>Tab through the elements. Focus stays trapped in the dialog.</p>
    <input type="text" placeholder="Name" class="mb" />
    <input type="email" placeholder="Email" class="mb" />
  </div>
</k-dialog>
<button onclick="document.getElementById('focusDialog').open()">Open Dialog</button>

JavaScript Reference

Constructor

Extends LitElement

new FocusCapture()

Requirements

• Lit

Properties

afterFocus: function

A method that is called when focus reaches the end capture element. By default, it finds the first focusable element within the component and focuses it. Focusable elements include: button, [href], input, select, textarea, and [tabindex]:not([tabindex="-1"]).

Methods

render(): TemplateResult

Renders the component with a slot for children and an invisible div with tabindex="0" that captures focus and cycles it back to the beginning.