In my pursuit of a solution to move from one input to another on the press of the Enter key, I came across various posts suggesting custom directives. However, I prefer a solution that works without having to implement a directive on every component.
My attempt to use dispatchEvent with the key Tab did not yield the desired outcome. It seemed like it should have been straightforward. I am hopeful that someone can help me identify what went wrong with this stackblitz example.
<input (keyup)="handleChange($event)">
public handleChange(e: KeyboardEvent)
{
if (e && e.keyCode === 13)
{
// Dispatching keyboard events for Tab key
e.srcElement.dispatchEvent(new KeyboardEvent('keydown', { key: '9' }));
e.srcElement.dispatchEvent(new KeyboardEvent('keypress', { key: '9' }));
e.srcElement.dispatchEvent(new KeyboardEvent('keyup', { key: '9' }));
// Other attempts at dispatching Tab key events
console.log("Should move. Event was dispatched on", e.target, e.srcElement);
}
}