How to use the @uifabric/utilities.isElementFocusZone function in @uifabric/utilities

To help you get started, we’ve selected a few @uifabric/utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
let target = ev.target as HTMLElement
    const path = []

    while (target && target !== this._root.current) {
      path.push(target)
      target = getParent(target, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement
    }

    while (path.length) {
      target = path.pop() as HTMLElement

      if (target && isElementTabbable(target)) {
        this.setActiveElement(target, true)
      }

      if (isElementFocusZone(target)) {
        // Stop here since the focus zone will take care of its own children.
        break
      }
    }
  }
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
this._activeElement = null
      }
    }

    // If active element changes state to disabled, set it to null.
    // Otherwise, we lose keyboard accessibility to other elements in focus zone.
    if (this._activeElement && !isElementTabbable(this._activeElement)) {
      this._activeElement = null
    }

    const childNodes = element && element.children

    for (let childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {
      const child = childNodes[childIndex] as HTMLElement

      if (!isElementFocusZone(child)) {
        // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.
        if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {
          child.setAttribute(TABINDEX, '-1')
        }

        if (isElementTabbable(child)) {
          if (this.props.disabled) {
            child.setAttribute(TABINDEX, '-1')
          } else if (
            !this._isInnerZone &&
            ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)
          ) {
            this._defaultFocusElement = child
            if (child.getAttribute(TABINDEX) !== '0') {
              child.setAttribute(TABINDEX, '0')
            }
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
private getFirstInnerZone(forRootElement?: HTMLElement | null): FocusZone | null {
    const rootElement = forRootElement || this._activeElement || this._root.current

    if (!rootElement) {
      return null
    }

    if (isElementFocusZone(rootElement)) {
      return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]
    }

    let child = rootElement.firstElementChild as HTMLElement | null

    while (child) {
      if (isElementFocusZone(child)) {
        return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]
      }
      const match = this.getFirstInnerZone(child)

      if (match) {
        return match
      }

      child = child.nextElementSibling as HTMLElement | null
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
private getFirstInnerZone(forRootElement?: HTMLElement | null): FocusZone | null {
    const rootElement = forRootElement || this._activeElement || this._root.current

    if (!rootElement) {
      return null
    }

    if (isElementFocusZone(rootElement)) {
      return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]
    }

    let child = rootElement.firstElementChild as HTMLElement | null

    while (child) {
      if (isElementFocusZone(child)) {
        return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string]
      }
      const match = this.getFirstInnerZone(child)

      if (match) {
        return match
      }

      child = child.nextElementSibling as HTMLElement | null
    }

    return null
  }
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
private getOwnerZone(element?: HTMLElement): HTMLElement | null {
    let parentElement = getParent(element as HTMLElement, ALLOW_VIRTUAL_ELEMENTS)

    while (
      parentElement &&
      parentElement !== this._root.current &&
      parentElement !== document.body
    ) {
      if (isElementFocusZone(parentElement)) {
        return parentElement
      }

      parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS)
    }

    return this._root.current
  }
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
private setActiveElement(element: HTMLElement, forceAlignemnt?: boolean): void {
    const previousActiveElement = this._activeElement

    this._activeElement = element

    if (previousActiveElement) {
      if (isElementFocusZone(previousActiveElement)) {
        this.updateTabIndexes(previousActiveElement)
      }

      previousActiveElement.tabIndex = -1
    }

    if (this._activeElement) {
      if (!this._focusAlignment || forceAlignemnt) {
        this.setFocusAlignment(element, true, true)
      }

      this._activeElement.tabIndex = 0
    }
  }