Find the first focusable element inside a DOM element

index.ts

export function findFirstFocusableElement(
  element: HTMLElement | null,
  tags: string = "",
  { withDefaults } = { withDefaults: false }
) {
  if (!element) return;

  const defaults =
    "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])";

  const focusableElements = element.querySelectorAll(
    withDefaults
      ? tags.length
        ? `${defaults}, `.concat(tags)
        : defaults
      : tags
  );

  if (focusableElements.length > 0) {
    return focusableElements[0] as HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
  }
}

const firstInvalidInput = findFirstFocusableElement(
  document.querySelector("form"),
  ".is-invalid textarea, .is-invalid input",
  { withDefaults: false }
);