Lalit Baghel

Software Developer

11th December, 2022

Trap focus with in a block in Angular by Exclude disabled,hidden and display none elements

In this tutorial we learn how to trapFocus inside particular area.
1)Create a directive file trap-focus.directive.ts

import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[trapFocus]',
})
export class TrapFocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.trapFocus(this.el.nativeElement);
  }

  trapFocus(element) {
    //here you can add more tags which your form or Dom have
    const focusableEls1 = element.querySelectorAll(
      'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"]'
    );

    let focusableEls = [].filter.call(focusableEls1, function (el: any) {
      var style = window.getComputedStyle(el);
      var checkOffSet = !!(
          el.offsetWidth ||
          el.offsetHeight ||
          el.getClientRects().length
        );
      return style.display !== 'none' && !el.disabled && checkOffSet;
    });

    console.log('focusableEls', focusableEls);
    const firstFocusableEl: any = focusableEls[0];
    const lastFocusableEl: any = focusableEls[focusableEls.length - 1];

    element.addEventListener('keydown', function (e) {
      var isTabPressed = e.keyCode === 9; // isTabPressed
      if (!isTabPressed) return;

      if (e.shiftKey) {
        /* shift + tab */ if (document.activeElement === firstFocusableEl) {
          lastFocusableEl.focus();
          e.preventDefault();
        }
      } /* tab */ else {
        if (document.activeElement === lastFocusableEl) {
          firstFocusableEl.focus();
          e.preventDefault();
        }
      }
    });
  }
}

2)Import Your directive in app.module.ts inside declaration and import

@NgModule({
   declarations: [
    TrapFocusDirective
  ],
  import: [
    TrapFocusDirective
  ]

3)Now you can use like that and focus being trap

<h3> Angular trapFocus</h3>
<p>
  It traps focus within a block.
</p>
<p>
  Use tab of shift/tab to navigate the below items
</p>

<button>focusable item</button>
<button>focusable item</button>
<br/>

<fieldset trapFocus class="focusable">
  <legend> trapFocus</legend>
  <p>
    <input type="radio" /> radio<br/>
    <span> span </span>
    <button disabled> button disabled </button>
  </p>
  <p>
    <a href="#">&lt;a> link</a> 
    <span> span </span>
    <button> button </button>
  </p>
  <p style="display:none;">
    <input type="checkbox" /> checkbox
    <select><option>select</option></select>
    <br/>
    <button>focusable item</button>
  </p>
</fieldset>

<button>focusable item</button>
<button>focusable item</button>

Lalit Baghel

Related Tutorial

Trap focus in Angular using the CDK.

About us

Find Online Tools

Quick links

Social links

Other