# wrTrapFocus

> Keeps Tab and Shift+Tab cycling inside a container, such as a dialog.

Source: https://ngwr.dev/reference/utils/wr-trap-focus  
Kind: Util  
Updated in v16  
Optional

## Usage

```angular-ts
import { wrTrapFocus } from 'ngwr/utils';

@HostListener('keydown', ['$event']) onKey(e: KeyboardEvent) {
  wrTrapFocus(dialogRef.nativeElement, e);
}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrTrapFocus(root, event)` | Cycles Tab focus inside `root`. Call it from a keydown handler; returns `true` when it handled a Tab. | `(root: HTMLElement, e: KeyboardEvent) => boolean` | `—` |

## See also

- [wrGetFocusableElements](https://ngwr.dev/reference/utils/wr-get-focusable-elements) — Lists the focusable descendants of an element, in DOM order.
- [Overlay](https://ngwr.dev/guides/overlay) — Style ngwr's floating panels and control where focus goes.
- [Dialog](https://ngwr.dev/reference/components/dialog) — Open any component as a modal dialog and await its result.
- [Drawer](https://ngwr.dev/reference/components/drawer) — A side panel that slides in from any edge of the screen.