1. Feedback
  2. Angular
  3. 29286

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

2
Votes

Using Static Clear Button to reset value does not reset it fully (only visually)

We have discovered a bug with the showClearButton feature when we tried to dynamically toggle the static approach (setting cssClass to 'e-static-clear). We need this so that we can have a static clear button, but one thats only visible when the input actually contains a value (hidden when there is no value). So the bug is that when the clear button is clicked and then focus is removed from the textbox the value of the input is not actually updated. Details below:


Using the following code:

HTML:

<ejs-textbox showClearButton="true" (blur)="lmao($event, 'blur')" (valueChange)="lmao($event, 'valueChange')" [cssClass]="cssClass" value="Third"></ejs-textbox>

TS:

lmao($event, trigger){
console.log( 'trigger: '+ trigger);
console.log( $event);
if($event.value === '' || $event.value === null){
this.cssClass = '';
}else{
this.cssClass = 'e-static-clear';
}
console.log(this.cssClass);
}

The code above sets the e-static-clear dynamically through the cssClass attribute. Unfortunately when the value is cleared using the clear button it actualy stays unchanged. We found this out by doing the following:

1.
Loading the page with value already set. This works as expected. The value is propagated directly as $event and the clear button is visible even when the input is not in focus
Empty



2. 
Focusing the input, then using backspace key to remove the value and then removing focus. This also works as expected - the clear button disappears. The value is correctly updated and $event contains multiple properties in this case. In this case both valueChange and blur are triggered.
Empty


3. Focusing the input, the entering the value of 'Test', then clicking the clear button and then removing focus. This is the bugged behavior and does not work as expected - the clear button does not disappear (but it should)


With the value entered

Empty


After clicking the clear button

Empty


You can see above that the input is vusally cleared, but in the console the value is still set to 'Test' which breaks our implementation.

Please can you ensure that the $event.value is equal to '' when the clear button is clicked?


Additionally, we ideally want to be able to do this without adding TS code bound to the change events.
The code we prefer to use is this:

<ejs-textbox #clearInput showClearButton="true" cssClass="{{clearInput.value ? 'e-static-clear' : ''}}"></ejs-textbox>

But using this has the same bug as what I described above. because clearInput.value is not reset to '' when the clear button is clicked.