Typescript KeyboardEvent bug: incorrect initialization of keys

I'm trying to generate a KeyboardEvent in my Typescript code.

const arrowLeft = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
console.log(arrowLeft.keyCode, arrowLeft.key, arrowLeft.code);

When I check the value of arrowLeft.keyCode, I expect it to be 37. However, I see 0, 'Left', '' instead. The issue is that I cannot manually set the keyCode as it is read-only in the KeyboardEvent interface.

Does anyone know if this is a problem specific to Typescript? How can I create an event with a keycode of 37? This test is part of my Angular Component testing process.

angulartypescriptunit-testingkeycode

Answer №1

It appears to be a bug on the side of Typescript due to the initializer LanguageEvent has. However, I found a workaround that resolved the issue by using Object.define to set the keyCode.

Object.defineProperty(arrowRight, 'keyCode', {
    get : () => 39
});

console.log(arrowRight.keyCode, arrowRight.key, arrowRight.code);

Despite the deprecation of keyCode, the fact remains that the initializer should still support it. This is crucial for Internet Explorer 9 and 11 which rely on keyCode as they do not fully support event.code or event.key. Therefore, LanguageEvent should allow keyCode in its initializer.

let arrowRight = new KeyboardEvent('keydown', { keyCode: 39 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 13: Issue with displaying lazy loaded module containing multiple outlets in a component

Angular version ^13.3.9 Challenge Encountering an issue when utilizing multiple outlets and attempting to render them in a lazy module with the Angular router. The routes are being mapped correctly, but the outlet itself is not being displayed. Sequence ...

angulartypescriptangular-routingangular-routerlinkangular-auxiliary-routes

Setting an optional property to null is not permitted

In my model class, I have defined an optional property as follows: export class Workflow { constructor( public id: number, public started: Date, public documentId: number, public document: Document, public status: WorkflowStatus, ...

angulartypescript

How can variables within nested ngFor loops be referenced in Angular 1.5 compared to Angular 10?

This particular piece of code was functional in Angular 1.5. It featured a condition where the <tr> element would only be displayed if the 'showFields' flag for that specific row key was set to true. <table> <ng-container *ngIf=& ...

angular

Encountering difficulties setting a value to a key within an Object in Angular/Typescript

I'm currently working with Angular, and I've encountered an issue while trying to assign a value to a key within my model. Here's a snippet of my code: export class aa{ types: bb[]; } export interface bb{ name: string; age: str ...

angulartypescript

Encountering a MatFormFieldModule error during npm start due to it not being recognized as an NgModule

Upon initially running npm start, I encounter the following error: ERROR in MatFormFieldModule is not an NgModule. webpack: Failed to compile. However, after making a file edit and saving, it compiles successfully without any issues. The cause of the init ...

angulartypescriptangular4-forms

Discovering the best way to utilize pagination for searching all data within Angular 8

Hey there, good morning everyone! I'm currently working on an Angular 8 app that showcases a table filled with data from a database. This table comes equipped with a search box and a pagination feature using the "Ng2SearchPipeModule" and "JwPaginatio ...

angularsearchpaginationangular8

Collaborate on an Angular2 codebase for both a web application and a hybrid application

I am considering creating a mobile app based on my existing Angular2 web app codebase. After researching, I have found two possible options - Ionic2 and NativeScript. Upon further investigation, it appears that both Ionic2 and NativeScript have their own ...

angularionic2nativescript

There seems to be a bug in the reducer within the store (using react, redux toolkit, and TypeScript)

Utilizing redux with typescript, I aim to create a reducer that will modify the state of the store, and my defined types are as follows: interface IArticle { id: number, title: string, body: string, } type ArticleState = { articles: IArticle[] } ...

reactjstypescriptredux

Ensuring that all observables within a for loop have completed before moving on to the next block of code

Here is a scenario where the following code snippet is used: getPersons().subscribe( persons => { for (const person of persons) { getAddress(person.id).subscribe( address => { person.addres ...

angularrxjs

What is the best way to convert JSON into an Angular 7 object?

My challenge involves consuming a web API that provides the following data: { "FileStatuses": { "FileStatus": [ { "accessTime": 0, "blockSize": 0, "childrenNum": 13, "fileId": 16396, ...

jsonangularrest

rxjs - monitoring several observables and triggering a response upon any alteration

Is there a way to watch multiple observables and execute a function whenever any of them change? I am looking for a solution similar to the functionality of zip, but without requiring every observable to update its value. Also, forkJoin isn't suitable ...

typescriptrxjs

Creating a dynamic array in an Angular 2 service for real-time changes monitoring by a component

I am facing an issue where my NotificationsBellComponent is not receiving changes to the array in the service even though the _LocalStorageService is returning data correctly. Q) How can I ensure that my component receives updates when the service collect ...

servicetypescriptangularobservableionic2

I am facing difficulty in deploying my Next.js app with Firestore

Having trouble deploying my application using npm run build, Vercel, or another service. It works fine locally without showing any errors. I am using Firebase, Next.js, and TypeScript. The issue seems to be related to getStaticProps. When requesting data, ...

typescriptfirebasenext.jsfirebase-hosting

Developing React component libraries with TypeScript compared to Babel compiler

Currently, I'm utilizing the babel compiler for compiling my React component libraries. The initial choice was influenced by Create React App's use of the same compiler. However, I've encountered challenges with using babel for creating libr ...

reactjstypescriptbabeljstsc

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

reactjstypescriptreact-router-redux

Error encountered while exporting TypeScript module

While I am working with Angular, TypeScript, and Gulp, my module system is CommonJS. However, I encountered an error when trying to import a module into my main.ts file: Error: Cannot find external module 'modules.ts'. Here is the snippet from ...

javascriptangularjstypescript

Angular Error: Property 'map' is not found in type 'OperatorFunction'

Code: Using map and switchMap from 'rxjs/operators'. import { map, switchMap } from 'rxjs/operators'; Here is the canActivate code for route guard: canActivate(): Observable<boolean> { return this.auth.userObservable ...

angulartypescriptrxjs

Managing loading and changing events using Angular, jQuery, and Web API

I am populating a dropdown select using ng-repeat. <select onchange="ChangeMonth()" id="month"> <option ng-repeat="(key,val) in Months" ng-selected="val==ActiveMonth" value="{{key}}"> {{val}} ...

javascriptjqueryangularasp.net-web-api

Photo captured by camera is not stored in photo gallery

I am currently working on a basic image upload form that allows users to take photos using their phone camera and upload them. However, I have noticed that the pictures taken this way are not being saved to the gallery. Is there something missing in the H ...

javascriptangularhtmlandroid-cameramedia

Looking for a way to dynamically adjust the height based on window resizing

I am trying to figure out how to adjust the height of a scrollable grid dynamically. I came across a solution on this website However, the provided solution is not suitable for me as it has: styles: [` html, body, my-app { height: 100%; } '] ...

javascriptangularkendo-ui