Bug: One-way data binding in TdSearchInputComponent

[jarnbjo]

Bug Report

Using Angular version: 13.3.5 (but probably not relevant)

Short summary

After updating from Covalent 3.1.2 to 4.1.8 our usage of TdSearchInputComponent does not work anymore. Changes in the data model are reflected in the input component (if the data model changes, the displayed value in the input field is updated), but typing anything in the input field does not propagate to the bound data model. The same issue occurs both if we bind the input field to a component property using ngModel, as well as if we bind to a reactive form using formControlName.

Longer description

By looking at the source code and the differences between Covalent 3.1.2 and 4.1.0, I have found the following differences:

In Covalent 3.x, TdSearchInputComponent used a mixin provided by mixinControlValueAccessor where the registerOnChange method was implemented in such a way that the component remembered the provided callback function:

    registerOnChange(fn: any): void {
      this.onChange = fn;
    }

... and then there was an implemented setter for the value attribute used as binding in the template, so that any changes to the input field was propagated to the event listener provided to the registerOnChange method:

    set value(v: any) {
      if (v !== this._value) {
        // ...
        this.onChange(v);
        // ...
      }
    }

If I look at the implementation in Covalent 4, unless I miss something obvious, it seems to me as if the functionality provided by the mixin in Covalent 3 has been removed, but not replaced with any new code to do the same job. The implementation of the ControlValueAccessor method has been replaced with an empty noop method:

  registerOnChange(): void {
    noop;
  }

... and the value is just written into a simple class field, without any propagation of the changes:

@Input() value?: unknown;

As a workaround we have now bound a method to the searchDebounce emitter (debounce=0 is now required for changes in the input field to be immediately propagated to the model):

(searchDebounce)="searchDebounce($event)" [debounce]="0"

... and implemented a method to manually process any changes in the input value and set the new value in the correct FormControl:

  searchDebounce(v: string) {
    this.form.get('query').setValue(v);
  }

It seems to me as if the same issue also applies to the implementation of TdSearchBoxComponent.

[owilliams320]

🎉 This issue has been resolved in version 4.1.10 🎉

The release is available on:

• v4.1.10
• GitHub release

Your semantic-release bot 📦🚀