question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

change event fires multiple times when using custom search input field

See original GitHub issue

Describe the bug When using a custom search input field with ng-header-tmp, there is an issue with the change event firing multiple times and its payload being incorrect, sometimes holding an event object instead of the current model.

Reproducible example Stackblitz example

Note that this stackblitz is a minimally edited version of this example from the demos. It has only been changed to input a (change) event monitor.

To Reproduce

  1. Navigate to the stackblitz example.
  2. Open the console to see messages printed there.
  3. Open the ng-dropdown
  4. Type in some characters to filter the list. For example, kau
  5. Click on an item to select it. Note that multiple change messages print to the console, and one of them is an event object itself

Note that this issue doesn’t happen when using the native search functionality given by [searchable].

Note that a similar problem occurs with deselecting when [multiple] is true.

Expected behavior There should only be one change event.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: OSX 10.12.6
  • Browser: chrome 75.0.3770.142 (Official Build) (64-bit), firefox 68.0.1 (64-bit)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
ayhtutcommented, Dec 1, 2020

same for me, it is still triggering twice even after $event.stopPropagation() is added. What I did to overcome this issue is to validate with $event.

`<ng-select (change)=“filterChange($event)”>

public filterChange(arg:any){ if(arg && arg.type == ‘change’) return; console.log(‘filter change’); }`

0reactions
prom00commented, Jun 17, 2022

I’ve had a simular issue. It turned out to not be an issue with ng-select.

When creating a new (test) function in my *.ts file I then added a console.log(event). This turned out to be triggered only once. The issue was in my following code which also edited the value.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why does jQuery on change event fire multiple times?
The reason is because you are nesting your event handlers. You've placed a static event handler within a delegated one, so each time...
Read more >
Introduction to events - Learn web development | MDN
Inside the addEventListener() function, we specify two parameters: the name of the event we want to register this handler for, and the code...
Read more >
Handling Events :: Eloquent JavaScript
To notice when something was typed, elements that you can type into, such as the <input> and <textarea> tags, fire "input" events whenever...
Read more >
How to Handle Multiple Inputs with a Single onChange ...
The onChange handler will listen for any change to the input and fire an event when the value changes. With a text input...
Read more >
.change() | jQuery API Documentation
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select>...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found