Number input fires valueChanges twice #12540

manofearth · 2016-10-26T08:27:39Z

May be bug.

ReactiveFormsModule. Input with type "number" fires valueChanges event twice when changed from browser.

I expect it to fire valueChanges once.

Here is a plunkr example: https://plnkr.co/edit/HYCtlP72W3edsaZe9HtR?p=preview

I use ngrx/store to manage state and subscribe my store to valueCahnges observable. When I change value of input, reducers fires twice. It is not optimal, I suppose.

Angular version: 2.1.0

Browser: Chrome

robwormald · 2016-10-26T08:30:51Z

Hmm, yeah, looks like a bug to me. We're listening to both events https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/number_value_accessor.ts#L34-L35 - depending on the browser, that'll fire twice in certain scenarios.

cc @kara

buddyackerman · 2016-12-20T17:07:31Z

Curious if this is going to be fixed soon.

buddyackerman · 2017-02-02T15:42:56Z

This has been open for quite a while, is it going to be fixed soon?

DzmitryShylovich · 2017-02-02T15:45:35Z

@buddyackerman browser?

buddyackerman · 2017-02-02T16:00:07Z

@DzmitryShylovich Chrome, FF, IE11

DzmitryShylovich · 2017-02-02T16:10:48Z

We will be able to fix it when #12990 will be merged

buddyackerman · 2017-02-02T16:17:47Z

@DzmitryShylovich OK, any idea when that will be?

DzmitryShylovich · 2017-02-02T16:18:10Z

no idea :)

robachma · 2017-02-26T22:54:14Z

Wondering when this will be fixed. I think it is causing the same issue that I am facing.

setValue() { this.myForm.controls['control1'].valueChanges.subscribe({ next: (change) => { if (change = 'Yes') { this.myForm.controls['controlGroup'].enable() } else if (change = 'No') { this.myForm.controls['controlGroup'].disable(); } } });

Using a radio button for this. When the value changes to 'Yes', it is working as expected. But when 'No' is selected, it does not disable my control group.

Not positive if these are related. Please help. Thx

makiJS · 2017-06-08T08:27:51Z

+1
version "@angular/forms": "2.0.0"

ebem · 2017-06-12T09:44:51Z

+1 "@angular/forms": "^4.0.0"

ChrisDevinePimss · 2017-07-26T10:04:40Z

am still getting this issue in latest angular, any idea on a fix date?

sebinbenjamin · 2017-08-15T19:25:25Z

same issue in "@angular/forms": "4.2.3",

michellequack · 2017-10-12T19:48:51Z

This is actually a huge issue for us. We send significant data back to the server on some changes (customer requirement for autosave) and it is causing our application to be just too slow to use angular reactive forms. Is there any chance at all that this will be fixed soon?

dgroh · 2017-11-10T12:30:19Z

+1

tomas-cani · 2017-11-24T13:48:10Z

Same problem as you @michellequack. As a temporary workaround you may want to use distinctUntilChanged

manichandra · 2017-12-26T22:28:59Z

Thanks @tomas-cani . It works perfectly. Used Observable.fromEvent() to capture the (onchange) event. I am using it for file upload feature.

carlospalacin · 2018-01-08T16:28:28Z

same issue in "@angular/forms": "5.1.3"

joshuaballas · 2018-03-15T17:59:59Z

Having this same issue on v5.2.9. Causing multiple API hits on component load.

Provson · 2018-04-17T12:15:43Z

Same issue on v5.2.10, any idea ?

dimiork · 2020-01-09T10:03:13Z

Temporary solution: RXJS debounceTime operator: https://www.learnrxjs.io/operators/filtering/debouncetime.html`

SLGShark6 · 2020-01-09T19:41:05Z

https://gist.github.com/SLGShark6/806b5f756db48dbe69da24fbaa92e23d

Edit:
If you include this in the module where you import the angular forms module, it SHOULD replace the default NumberValueAccessor, in case that was not clear.

Tested Angular 8+.

traviskaufman · 2020-01-10T15:10:45Z

Just an FYI that this basically makes number fields impossible to use with async validators 😄. @kara @robwormald are you open to contributions for a fix? This really seems like something that if fixed could really improve DX and lead to less surprises.

deumax · 2020-01-13T15:26:32Z

I experienced a similiar issue with text input fields, but it was a different problem.
I have a custom component which emits an event if form values change. The problem was that I named the output event 'change', which was fired a second time (presumedly on blur). Renaming 'change' to 'filterChange' fixed my problem.

traviskaufman · 2020-01-18T22:28:05Z

FWIW I was able to fix the number fields issue I mentioned above by creating a custom directive extending NumberValueAccessor. This class stores any previous values emitted by the host element, and implements @HostListener('input') and @HostListener('change') which only call onChange() if the given value is different than the stored value. Might not be perfect for every use-case but worked for mine!

import {Directive, HostListener, forwardRef} from '@angular/core';
import {NumberValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

export const FIXED_NUMBER_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => FixedNumberValueAccessor),
  multi: true
};

@Directive({
  selector: 'input[type=number][formControl][fixedNumberField],input[type=number][formControlName][fixedNumberField],input[type=number][ngModel][fixedNumberField]',
  providers: [FIXED_NUMBER_VALUE_ACCESSOR],
})
export class FixedNumberValueAccessor extends NumberValueAccessor {
  private lastValue: string;
  
  @HostListener('change', ['$event.target.value']) handleOnChange(value) {
    this.handleUpdate(value);
  }

  @HostListener('input', ['$event.target.value']) handleOnInput(value) {
     this.handleUpdate(value);
  }

  private handleUpdate(value: string) {
    if (value === this.lastValue) {
      return;
    }
    this.lastValue = value;
    this.onChange(value);
  }
}

StackBlitz

Would love to see a longer-term fixed prioritized and merged into core 😄

SLGShark6 · 2020-01-19T17:08:16Z

FWIW I was able to fix the number fields issue I mentioned above by creating a custom directive extending NumberValueAccessor. This class stores any previous values emitted by the host element, and implements @HostListener('input') and @HostListener('change') which only call onChange() if the given value is different than the stored value. Might not be perfect for every use-case but worked for mine!

import {Directive, HostListener, forwardRef} from '@angular/core';
import {NumberValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

export const FIXED_NUMBER_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => FixedNumberValueAccessor),
  multi: true
};

@Directive({
  selector: 'input[type=number][formControl][fixedNumberField],input[type=number][formControlName][fixedNumberField],input[type=number][ngModel][fixedNumberField]',
  providers: [FIXED_NUMBER_VALUE_ACCESSOR],
})
export class FixedNumberValueAccessor extends NumberValueAccessor {
  private lastValue: string;
  
  @HostListener('change', ['$event.target.value']) handleOnChange(value) {
    this.handleUpdate(value);
  }

  @HostListener('input', ['$event.target.value']) handleOnInput(value) {
     this.handleUpdate(value);
  }

  private handleUpdate(value: string) {
    if (value === this.lastValue) {
      return;
    }
    this.lastValue = value;
    this.onChange(value);
  }
}

StackBlitz

Would love to see a longer-term fixed prioritized and merged into core 😄

See my comment above, for just completely replacing it in the DI container,
https://gist.github.com/SLGShark6/806b5f756db48dbe69da24fbaa92e23d

turulb · 2020-01-23T14:44:26Z

+1
Because of this issue, two requests are sent to my backend, however, I need only when the value is changed, I don't need the value change event on blur.

marcodafonseca · 2020-01-24T04:38:40Z

+1
Discovered this bug recently. It affects my forms where calculations are done from a mobile device. Older devices get terribly slow to hide the keyboard due to events firing twice

mrpharderwijk · 2020-02-01T20:55:36Z

+1
I got this on an input with [(ngModel)] & (ngModelChange), the ngModelChange function is called twice. If I change my setup for using formControls and subscribe to the valueChanges it fires twice too, so this doesn't make a difference...

andreyinkin · 2020-02-04T00:02:52Z

+1
The issue occurs only when clicking up or down arrows on the input fiewld

laptrinhvien1994 · 2020-03-13T03:22:19Z

+1
I got the same issue.
For now, I used RxJS operator to handle it.

Prior to this commit, input field of type number used to fire valueChanges twice. First time after typing in the input field and second time when the input field loses the focus. PR Close angular#12540

Prior to this commit, input field of type number used to fire valueChanges twice. First time after typing in the input field and second time when the input field loses the focus. The `input event` is enough for valueChanges Observable, and is supported by both modern and old browsers like IE9-11. PR Close angular#12540

Prior to this commit, input field of type number used to fire valueChanges twice. First time after typing in the input field and second time when the input field loses the focus. The `input event` is enough for valueChanges Observable. BREAKING CHANGE: <description> (tests that could break because they rely on 'change' event, requirement for devs to add their own `(change)` listener if they want to support IE9 in the same way it is now, etc) PR Close angular#12540

Prior to this commit, input field of type number used to fire valueChanges twice. First time after typing in the input field and second time when the input field loses the focus. The `input event` is enough for valueChanges Observable. BREAKING CHANGE: We no longer listen to the `change` event. So, All tests that rely on `change` event could break. We should now listen to `input` event. Additionally, this change breaks IE9, because input events do not fire with backspace or cut actions on IE9. Devs who want to support IE9, will have to add their own `change` listener. PR Close angular#12540

Prior to this commit, number input fields would to fire valueChanges twice: once for `input` events when typing and second for the `change` event when the field lost focus (both events happen at once when using the increment and decrement buttons on the number field). Fixes angular#12540 BREAKING CHANGE: Number inputs no longer listen to the `change` event. * Tests which trigger `change` events need to be updated to trigger `input` events instead. * The `change` event was in place to support IE9, as we found that `input` events were not fired with backspace or cut actions. If you need to maintain IE9 support, you will need to add a change event listener to number inputs and call the `onChange` method of `NumberValueAccessor` manually. * Lastly, old versions of WebDriver would synthetically trigger the `change` event on `WebElement.clear` and `WebElement.sendKeys`. If you are using an old version of WebDriver, you may need to update tests to ensure `input` events are triggered. For example, you could use `element.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.BACK_SPACE);` in place of `element.clear()`. PR Close angular#12540

maxdulieu · 2020-05-07T17:44:35Z

Right on!

theCrius · 2020-05-08T11:01:54Z

OMG I can't believe it! I'll have to go back and remove all the workarounds now 🤣 👏

We needed a pandemic to have the time to fix this issue :D

andreElrico · 2020-05-12T08:09:30Z

I was about to file an issue: https://stackblitz.com/edit/angular-ahq3v1?file=src/app/hello.component.ts

Wow, its been open for almost 4 years despite being a performance killer and easy to fix.

Thanks Alex for fixing <3

Splaktar · 2020-05-31T05:36:33Z

We needed a pandemic to have the time to fix this issue :D

That wasn't quite it. There was a blocker to fixing this that was finally resolved.

angular-automatic-lock-bot · 2020-07-01T16:13:35Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Prior to this commit, number input fields would to fire valueChanges twice: once for `input` events when typing and second for the `change` event when the field lost focus (both events happen at once when using the increment and decrement buttons on the number field). Fixes angular#12540 BREAKING CHANGE: Number inputs no longer listen to the `change` event. * Tests which trigger `change` events need to be updated to trigger `input` events instead. * The `change` event was in place to support IE9, as we found that `input` events were not fired with backspace or cut actions. If you need to maintain IE9 support, you will need to add a change event listener to number inputs and call the `onChange` method of `NumberValueAccessor` manually. * Lastly, old versions of WebDriver would synthetically trigger the `change` event on `WebElement.clear` and `WebElement.sendKeys`. If you are using an old version of WebDriver, you may need to update tests to ensure `input` events are triggered. For example, you could use `element.sendKeys(Keys.chord(Keys.CONTROL, "a"), Keys.BACK_SPACE);` in place of `element.clear()`. PR Close angular#12540 PR Close angular#36087

robwormald added severity3: broken comp: forms labels Oct 26, 2016

robwormald assigned kara Oct 26, 2016

mknoedel mentioned this issue Apr 16, 2017

Category search in product edit component does 2 http searches each key-up navingator/northwind-web-test#23

Closed

kara mentioned this issue Aug 4, 2017

Reactive forms valueChanges method fires twice for one change on input fields. #18350

Closed

kara added the freq3: high label Aug 4, 2017

IgorMinar added the type: bug/fix label Jan 23, 2018

ngbot bot added this to the Backlog milestone Jan 23, 2018

kara mentioned this issue Feb 13, 2018

ngModelChange called when the input lose focus (type number #22115

Closed

This comment has been minimized.

Sign in to view

TidianeRolland mentioned this issue Mar 16, 2020

fix(forms): number input fires valueChanges twice. #36087

Closed

14 tasks

alxhub closed this in 97d6d90 May 7, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 1, 2020

angular / angular Public

Number input fires valueChanges twice #12540

Number input fires valueChanges twice #12540

Comments

manofearth commented Oct 26, 2016

robwormald commented Oct 26, 2016

buddyackerman commented Dec 20, 2016

buddyackerman commented Feb 2, 2017

DzmitryShylovich commented Feb 2, 2017

buddyackerman commented Feb 2, 2017

DzmitryShylovich commented Feb 2, 2017 • edited

buddyackerman commented Feb 2, 2017

DzmitryShylovich commented Feb 2, 2017

robachma commented Feb 26, 2017

makiJS commented Jun 8, 2017 • edited

ebem commented Jun 12, 2017

ChrisDevinePimss commented Jul 26, 2017

sebinbenjamin commented Aug 15, 2017

michellequack commented Oct 12, 2017

dgroh commented Nov 10, 2017

tomas-cani commented Nov 24, 2017 • edited

manichandra commented Dec 26, 2017

carlospalacin commented Jan 8, 2018

This comment has been minimized.

joshuaballas commented Mar 15, 2018

Provson commented Apr 17, 2018

dimiork commented Jan 9, 2020

SLGShark6 commented Jan 9, 2020 • edited

traviskaufman commented Jan 10, 2020 • edited

deumax commented Jan 13, 2020

traviskaufman commented Jan 18, 2020

SLGShark6 commented Jan 19, 2020

turulb commented Jan 23, 2020 • edited

marcodafonseca commented Jan 24, 2020

mrpharderwijk commented Feb 1, 2020

andreyinkin commented Feb 4, 2020

This comment has been minimized.

laptrinhvien1994 commented Mar 13, 2020

maxdulieu commented May 7, 2020

theCrius commented May 8, 2020 • edited

andreElrico commented May 12, 2020

Splaktar commented May 31, 2020

angular-automatic-lock-bot bot commented Jul 1, 2020

DzmitryShylovich commented Feb 2, 2017 •

edited

makiJS commented Jun 8, 2017 •

edited

tomas-cani commented Nov 24, 2017 •

edited

SLGShark6 commented Jan 9, 2020 •

edited

traviskaufman commented Jan 10, 2020 •

edited

turulb commented Jan 23, 2020 •

edited

theCrius commented May 8, 2020 •

edited