Clarity: clrRange input fires an event twice when subscribed from a FormControl.

[nkolchakov]

Describe the bug

When subscribed to clrRange fromControl's valueChanges it fires an event twice.

How to reproduce

https://stackblitz.com/edit/clarity-v3-dark-theme-timeline-demo-fbmge8?file=src/app/app.component.ts

Steps to reproduce the behavior:

1. Go to Console
2. Try to fill the clrRange and clrText inputs. (the range input prints the text twice)

Expected behavior

On valueChanges the clrRange input event should fire once.

Versions

App

• Angular: ^9.1.9
• Clarity: 3+

Device:

• Browser Chrome, Firefox, Opera

[bbogdanov]

Hi @nkolchakov!

Forms are part of Angular and we are not adding anything on top of angular forms.

You can use pipes to handle this situation - pipe(distinctUntilChanged())

this.formGroup.get("clrRange").valueChanges.pipe(distinctUntilChanged()).subscribe((newValue: any) => { console.log('trigger clrRange - ', newValue); });

Hope that helps!

[gnomeontherun]

To be more clear, this happens to a range input regardless if you use Clarity or not. The change event fires on changing of the value, and when you release the mouse.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.