Observed Element

About

Observed Element allows finding and focusing elements which are not yet in the DOM.

All we do is mark an element as observed by giving it a name.

<button data-tabster='{"observed": {"name": "observedButton"}}'>
    Observed
</button>

Setup

To get Observed Element working, we need to call getObservedElement() function:

import { createTabster, getObservedElement } from "tabster";

let tabsterCore = createTabster(window);

let observedElement = getObservedElement(tabsterCore);

observedElement.requestFocus("observedButton", 100500);

Methods

getElement()

Returns observed element by the name if it's present in the application.

import { createTabster, getObservedElement } from "tabster";

let tabsterCore = createTabster(window);

let observedElement = getObservedElement(tabsterCore);

let element = observedElement.getElement("observedButton");

waitElement()

Waits for an element for the specified time, returns an element if it appears.

import { createTabster, getObservedElement, Types } from "tabster";

let tabsterCore = createTabster(window);

let observedElement = getObservedElement(tabsterCore);

let wait = observed.waitElement(
    "observedButton", // Name set using Tabster attribute.
    100500, // Timeout.
    Types.ObservedElementAccessibilities.Focusable // Only return when the
    // element becomes focusable.
);

// The result promise will be resolved once the element is mounted.
wait.result.then((value) => {
    console.log("Observed element:", value);
});

// We can also cancel the wait request.
wait.cancel();

requestFocus()

Waits for the observed element to appear in the DOM and focuses it.

A consecutive requestFocus() call or a manual focus movement inside the application will cancel the focus request automatically.

import { createTabster, getObservedElement, Types } from "tabster";

let tabsterCore = createTabster(window);

let observedElement = getObservedElement(tabsterCore);

let focus = observed.requestFocus("observedButton", 100500);

// The result promise will be resolved once the element is focused (or timed out).
focus.result.then((value: boolean) => {
    console.log("Observed element is focused:", value);
});

// We can also cancel the focus request.
focus.cancel();

Examples

Here be dragons.