How to use focus-trap - 10 common examples

const activateFocus = () => {
      if (elementRef.current && !focusTrapRef.current) {
        // @ts-ignore
        focusTrapRef.current = createFocusTrap(elementRef.current, {
          initialFocus: elementRef.current,
          onDeactivate: () => {
            if (onRequestClose && visible && !isUnmountingRef.current) {
              onRequestClose();
            }
          },
        });

        focusTrapRef.current.activate();
      }
    };

iframe.allowFullscreen = true
  iframe.scrolling = 'no'
  iframe.tabIndex = 0
  iframe.setAttribute('role', 'dialog')
  iframe.setAttribute('aria-label', 'ChangeCast Changelog')
  iframe.setAttribute('aria-hidden', true)
  iframe.setAttribute('tabindex', -1)

  // hide overlay and iframe to start
  overlay.className = `${styles.overlay} ${styles.overlayHidden}`
  iframe.className = `${styles.iframe} ${styles.iframeHidden}`

  document.body.appendChild(overlay)
  document.body.appendChild(iframe)

  let focusTrap = createFocusTrap(iframe, {
    initialFocus: iframe,
  })

  // shared state
  let open = false
  let toggleNotifications = new Map()

  function openChangeCast() {
    open = true

    iframe.contentWindow.postMessage('open', '*')

    overlay.className = `${styles.overlay} ${styles.overlayOpen}`
    iframe.className = `${styles.iframe} ${styles.iframeOpen}`
    iframe.setAttribute('aria-hidden', false)
    iframe.removeAttribute('tabindex')

componentDidMount() {
		jQuery( 'body' )
			.addClass( 'dops-modal-showing' )
			.on( 'touchmove.dopsmodal', false );
		jQuery( document ).keyup( this.handleEscapeKey );
		try {
			focusTrap.activate( ReactDOM.findDOMNode( this ), {
				// onDeactivate: this.maybeClose,
				initialFocus: this.props.initialFocus,
			} );
		} catch ( e ) {
			//noop
		}
	}

private setupFocusTrap(): void {
        if (this.focusTrapped) {
            try {
                this.focusTrap = focusTrap(this.elRef.nativeElement, {
                    clickOutsideDeactivates: true,
                    escapeDeactivates: false,
                    initialFocus: this.elRef.nativeElement
                });
                this.focusTrap.activate();
            } catch (e) {
                console.warn('Attempted to focus trap the popover, but no tabbable elements were found.');
            }
        }
    }

$onInit() {
    const {dialog, dialogInSidebar, $scope} = this.$inject;
    const dialogService = this.inSidebar ? dialogInSidebar : dialog;
    this.focusTrap = createFocusTrap(this.$inject.$element[0], {
      fallbackFocus: '[data-anchor="focus-trap-fallback"]',
      escapeDeactivates: false
    });

    this.dialogService = dialogService;
    this.previousBodyWidth = null;

    $scope.$on('$routeChangeSuccess', this.hide);
    $scope.$on('$routeUpdate', this.hide);
    $scope.$on('$destroy', dialogService.unregister);

    $scope.$watch(() => this.active, () => {
      if (this.active) {
        shortcuts.bindMap(this.getShortcuts(), {
          scope: this.DIALOG_NAMESPACE
        });

public activateFocusTrap(element: any, id: string): void {
        const trap = focusTrap(element, this._options);

        try {
            trap.activate();
            this._traps.push({ id, focusTrap: trap });
        } catch (e) {
            if (e instanceof Error && e.message === 'Your focus-trap needs to have at least one focusable element') {
                console.log('Focus trap not activated - No focusable elements found.');
            }
        }
    }

private setupFocusTrap(): void {
        try {
            this.focusTrap = focusTrap(this.elRef.nativeElement, {
                clickOutsideDeactivates: true,
                returnFocusOnDeactivate: true,
                escapeDeactivates: false
            });
        } catch (e) {
            console.warn('Unsuccessful attempting to focus trap the Combobox.');
        }
    }

mounted() {
    document.addEventListener('keydown', this.handleEscapeKeyDown)

    this.focusTrap = createFocusTrap(this.$refs.modal as HTMLElement)
  }

mounted () {
    document.querySelector('body').appendChild(this.$refs.aside)
    this.$once('hook:beforeDestroy', () => {
      document.querySelector('body').removeChild(this.$refs.aside)
    })

    this.focusTrap = createFocusTrap(this.$refs.aside, {
      clickOutsideDeactivates: true,
      returnFocusOnDeactivate: true,
      fallbackFocus: this.$refs.aside
    })
  },
  beforeDestroy () {

constructor(public _elm: ElementRef, options: Options) {
        options.onActivate = () => { this._active = true; activeTrap = this; };
        options.onDeactivate = () => { this._active = false; activeTrap = null; };
        this.trap = createFocusTrap(_elm.nativeElement, options);
        this.trap.activate();
    }