type method

Future<Online> type(
  1. AbstractSelector selector,
  2. Object? text, {
  3. bool show = true,
})

type more involved than set. more realistic due to waiting for the element to appear, scrolling to the element, moving the mouse over the element, focusing on the element by clicking on it waiting for the focusable child of the element and focusing on it, finding the first input/textarea/select and focusing on it and then typing the text

Implementation

Future<Online> type(AbstractSelector selector, Object? text,
    {bool show = true}) async {
  text ??= '';
  if (show) Show.waiting_for(selector.selector, 'to appear');
  var item = await (await page).waitForSelector(selector.selector);
  if (item != null) {
    if (show) Show.scrolling(selector.selector);
    await item.evaluate('''(element) => {
    element.scrollIntoView({behavior: "auto", block: "center", inline: "center"});
  }''');
    if (show) Show.hover(selector.selector);
    await item.hover();
    if (show) Show.focusing(selector.selector);
    await item.focus();
    // just in case if the element focusable is child of this element, we should bubble up the focus
    await item.evaluate('''(element) => {
    // bubble down the focus to the first focusable child
    var focusable = element.querySelector('input,button,textarea,select');
    if (focusable) {
      focusable.focus();
    }
    else {
      //find the first focusable parent and focus on it
      var parent = element.parentElement;
      while (parent) {
        var focusable = parent.querySelector('input,button,textarea,select');
        if (focusable) {
          focusable.focus();
          break;
        }
        parent = parent.parentElement;
      }
    }
  }''');
    if (show) Show.typing(selector.selector, text.toString());
    await item.type(text.toString());
  }

  return this;
}