How to use the @uifabric/utilities.getNextElement 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
break
          }
        }
      } else {
        candidateElement = element
        break
      }
    } while (element)

    // Focus the closest candidate
    if (candidateElement && candidateElement !== this._activeElement) {
      changedFocus = true
      this.focusElement(candidateElement)
    } else if (this.props.isCircularNavigation && useDefaultWrap) {
      if (isForward) {
        return this.focusElement(getNextElement(
          this._root.current,
          this._root.current.firstElementChild as HTMLElement,
          true,
        ) as HTMLElement)
      }
      return this.focusElement(getPreviousElement(
        this._root.current,
        this._root.current.lastElementChild as HTMLElement,
        true,
        true,
        true,
      ) as HTMLElement)
    }

    return changedFocus
  }
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
if (
      isInnerZoneKeystroke &&
      isInnerZoneKeystroke(ev) &&
      this.isImmediateDescendantOfZone(ev.target as HTMLElement)
    ) {
      // Try to focus
      const innerZone = this.getFirstInnerZone()

      if (innerZone) {
        if (!innerZone.focus(true)) {
          return
        }
      } else if (isElementFocusSubZone(ev.target as HTMLElement)) {
        if (
          !this.focusElement(getNextElement(
            ev.target as HTMLElement,
            (ev.target as HTMLElement).firstChild as HTMLElement,
            true,
          ) as HTMLElement)
        ) {
          return
        }
      } else {
        return
      }
    } else if (ev.altKey) {
      return
    } else {
      switch (ev.which) {
        case KeyCodes.space:
          if (this.tryInvokeClickForFocusable(ev.target as HTMLElement)) {
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
if (!element || !this._root.current) {
      return false
    }

    if (this.isElementInput(element)) {
      if (!this.shouldInputLoseFocus(element as HTMLInputElement, isForward)) {
        return false
      }
    }

    const activeRect = isBidirectional ? element.getBoundingClientRect() : null

    do {
      element = (isForward
        ? getNextElement(this._root.current, element)
        : getPreviousElement(this._root.current, element)) as HTMLElement

      if (isBidirectional) {
        if (element) {
          const targetRect = element.getBoundingClientRect()
          const elementDistance = getDistanceFromCenter(activeRect as ClientRect, targetRect)

          if (elementDistance === -1 && candidateDistance === -1) {
            candidateElement = element
            break
          }

          if (
            elementDistance > -1 &&
            (candidateDistance === -1 || elementDistance < candidateDistance)
          ) {
github microsoft / fluent-ui-react / src / components / FocusZone / FocusZone.tsx View on Github external
}
          return

        case KeyCodes.home:
          if (
            this.isElementInput(ev.target as HTMLElement) &&
            !this.shouldInputLoseFocus(ev.target as HTMLInputElement, false)
          ) {
            return false
          }
          const firstChild =
            this._root.current && (this._root.current.firstChild as HTMLElement | null)
          if (
            this._root.current &&
            firstChild &&
            this.focusElement(getNextElement(this._root.current, firstChild, true) as HTMLElement)
          ) {
            break
          }
          return

        case KeyCodes.end:
          if (
            this.isElementInput(ev.target as HTMLElement) &&
            !this.shouldInputLoseFocus(ev.target as HTMLInputElement, true)
          ) {
            return false
          }

          const lastChild =
            this._root.current && (this._root.current.lastChild as HTMLElement | null)
          if (
github microsoft / fluent-ui-react / src / lib / fabric / focus.ts View on Github external
export function focusLastChild(rootElement: HTMLElement): boolean {
  const element: HTMLElement | null = getNextElement(
    rootElement,
    rootElement.lastElementChild as HTMLElement,
    true,
    false,
    false,
    true,
  )

  if (element) {
    focusAsync(element)
    return true
  }
  return false
}