CODEWITHSUNDEEP
javascripthtmltypescripttypeselement
physicsboy
physicsboy

Reputation: 6326

Correct typing for nextElementSibling so .focus() can be used?

I am attempting to move focus in my form programatically with nextElementSibling, however I am also using Typescript and wanting to type my variables/constants...

I have had success without typing, and using the following:

myFunct(event) {
  const myEl = event.srcElement;
  const nextElement = myEl.nextElementSibling;

  if (nextElement) {
    nextElement.focus();
  }
}

However, when using types on the code I am getting inconsistencies and the following IntelliJ warning:

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

myFunct(event: KeyboardEvent) {
  const myEl: Element = event.srcElement;
  const nextElement: Element = myEl.nextElementSibling;

  if (nextElement) {
    nextElement.focus();
  }
}

However upon Googling, I find that the type for nextElementSibling should actually be Element, according to Mozilla

Can anybody help?

UPDATE:

It appears that the KeyboardEvent on the event is actually causing the issue..

Upvotes: 3

Views: 2252

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

From MDN: Element inherits properties from its parent, Element, and implements those from GlobalEventHandlers and TouchEventHandlers.

Hence, you can change your code to (code tested with typescriptlang.org):

function myFunct(event: KeyboardEvent) {
  const myEl = <HTMLElement>event.srcElement;
  const nextElement = <HTMLElement>myEl.nextElementSibling;

  if (nextElement) {
    nextElement.focus();
  }
}

Upvotes: 3

Related Questions