Nativescript-angular: SearchBar doesn't fire clear event when using ngModel (iOS only)

[manojdcoder]

SearchBar doesn't fire clear event when using ngModel. It happens only with iOS, works as expected in Android.

Code
<SearchBar [(ngModel)]="filterText" (clear)="onSearchBarClear($event)" (submit)="onSearchBarSubmit($event)"></SearchBar>

Environment

• CLI: 3.3.0
• Runtime(s): 3.3.0
• Cross-platform modules: 3.3.0
• NativeScript Angular: 4.4.1
• Angular: 4.4.6

[tsonevn]

Hi @manojdcoder,
I tested the case with NgModel and the SearchBar component, however, was unable to recreate an issue with this Angular directive. For your convenience, I am attaching GIF file from the simulator and sample project, please review it and make the needed changes, which will allow us to recreate the issue.

Something that could be related to the problem. Make sure that you have included NativeScriptFormModules in the module's imports.

Archive.zip

[manojdcoder]

@tsonevn clear event is fired when I manually erase the characters using backspace. The clear button is not responsive. It only works when I don't use SearchBar with ngModel.

[tsonevn]

Hi @manojdcoder,
I tested further the case and I have to confirm that this is a real issue for iOS and the clear event will not be fired, while ngModel is used.

In the meantime, I would suggest using the text instead of ngModel, which will work as expected on both platforms. For example:

<SearchBar [text]="filterText" (clear)="onSearchBarClear($event)" (submit)="onSearchBarSubmit($event)"></SearchBar>