CODEWITHSUNDEEP
javascriptangulartypescriptevents
Olivier Alves
Olivier Alves

Reputation: 73

Angular 5 keyup events is fired twice

So I have a very simple app, literaly a simple hello world, on top of that I added bootstrap for the design and ng-bootstrap for the components.

In one ts file I have the following code:

showMeTheKey(event: KeyboardEvent) {
    console.log(event);
}

On an html page I have the following code:

<input (keyup)="showMeTheKey($event)">

This results in two events appearing on the console whenever I press a key, the events are the same except the timestamp that is of course different (it's some microseconds differences here)

Any idea why this is happening ? Or is it normal ?

Thanks !

EDIT: To answer the comments here is my app code

Here is my app.module:

import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { InputModule } from './input/input.module';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    InputModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my app component:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';

    showMeTheKey(event: KeyboardEvent) {
        console.log(event);
        event.stopImmediatePropagation();
    }
}

And here is my app html:

<input (keyup)="showMeTheKey($event)">

EDIT 2: Here is an online demo with an editor so you can have access to the code (of course on the live demo press F12 to see the logs):

Live demo: https://angular-znlk4p.stackblitz.io

Editor: https://stackblitz.com/edit/angular-znlk4p

EDIT 3: Here is a printscreen of the event firing twice in the demo image

Upvotes: 2

Views: 2694

Answers (1)

Olivier Alves
Olivier Alves

Reputation: 73

Hey all I have found my bug !

I am developing through a virtual machine ! And the software I am using is sending twice the keys for some reason... Even if I only type one letter, it is very strange...

I need report that bug to the manufacturer !

I tested my own demo on a non VM PC and it works indeed correctly !

Thank you all for helping me find this !

Cheers !

Upvotes: 1

Related Questions