Trilium Frontend API
    Preparing search index...

    Class FocusTracker

    Allows observing a group of DOM Elements or module:ui/view~View view instances whether at least one of them (or their child) is focused.

    Used by the module:core/editor/editor~Editor in order to track whether the focus is still within the application, or were used outside of its UI.

    Note focus and blur listeners use event capturing, so it is only needed to register wrapper Element which contain other focusable elements. But note that this wrapper element has to be focusable too (have e.g. tabindex="-1").

    Check out the {@glink framework/deep-dive/ui/focus-tracking "Deep dive into focus tracking"} guide to learn more.

    Hierarchy (View Summary)

    Index
    constructor
    _elements _externalViews focusedElement isFocused
    elements externalViews
    add destroy remove

    • Returns FocusTracker

    Internal_elements

    _elements: Set<Element>

    List of registered DOM elements.

    Internal_externalViews

    _externalViews: Set<ViewWithFocusTracker>

    List of views with external focus trackers that contribute to the state of this focus tracker.

    focusedElement: Element

    The currently focused element.

    While #isFocused isFocused remains true, the focus can move between different UI elements. This property tracks those elements and tells which one is currently focused.

    Note: The values of this property are restricted to #elements or module:ui/view~View#element elements registered in #externalViews.

    isFocused: boolean

    True when one of the registered #elements or #externalViews is focused.

    • get elements(): Element[]

      List of registered DOM elements.

      Note: The list does do not include elements from #externalViews.

      Returns Element[]

    • get externalViews(): ViewWithFocusTracker[]

      List of external focusable views that contribute to the state of this focus tracker. See #add to learn more.

      Returns ViewWithFocusTracker[]

    • Starts tracking a specified DOM element or a module:ui/view~View instance.

      • If a DOM element is passed, the focus tracker listens to the focus and blur events on this element. Tracked elements are listed in #elements.
      • If a module:ui/view~View instance is passed that has a FocusTracker instance (~ViewWithFocusTracker), the external focus tracker's state (#isFocused, #focusedElement) starts contributing to the current tracker instance. This allows for increasing the "reach" of a focus tracker instance, by connecting two or more focus trackers together when DOM elements they track are located in different subtrees in DOM. External focus trackers are listed in #externalViews.
      • If a module:ui/view~View instance is passed that has no FocusTracker (not a ~ViewWithFocusTracker), its module:ui/view~View#element is used to track focus like any other DOM element.

      Parameters

      Returns void

    • Destroys the focus tracker by:

      • Disabling all event listeners attached to tracked elements or external views.
      • Removing all tracked elements and views that were previously added.

      Returns void

    • Stops tracking focus in the specified DOM element or a module:ui/view~View view instance. See #add to learn more.

      Parameters

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods