Property 'focus' does not exist on 'Element'?

Question

Creating a keyboard navigation, and facing the following issue:

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  currentActive.previousElementSibling.focus();
}

The code works as expected, but TypeScript complains that Property 'focus' does not exist on 'Element'? - the currentActive is an <img /> tag.

I've tried assigning the currentActive to be a HTMLElement, by doing so: let currentActive = document.activeElement as HTMLCollectionOf<HTMLElement>, but it doesn't seem to like that.

What am I missing?

Answer 1

I had the same problem and I solved it by defining the type of the element I was expecting from queryselector. In my case I was expecting an input element, so I did:

document.querySelector<HTMLInputElement>(`input[name=${element-name}]`)?.focus()

Answer 2

I would suggest trying something like this:

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  (currentActive.previousElementSibling as HTMLElement)?.focus();
}

Note that optional chaining is available since TypeScript 3.7