diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts
index 5275c21ab7..eb6d1218b7 100644
--- a/src/components/searchbar/searchbar.ts
+++ b/src/components/searchbar/searchbar.ts
@@ -34,13 +34,12 @@ import { Debouncer } from '../../util/debouncer';
'' +
'' +
'
' +
- '' +
+ '[attr.spellcheck]="_spellcheck">' +
'' +
'' +
'',
@@ -202,6 +201,12 @@ export class Searchbar extends Ion {
set value(val) {
this._value = val;
+ if (this._searchbarInput) {
+ let ele = this._searchbarInput.nativeElement;
+ if (ele) {
+ ele.value = val;
+ }
+ }
}
/**
@@ -306,9 +311,8 @@ export class Searchbar extends Ion {
* Update the Searchbar input value when the input changes
*/
inputChanged(ev: any) {
- let value = ev.target.value;
+ this._value = ev.target.value;
this._debouncer.debounce(() => {
- this._value = value;
this.onChange(this._value);
this.ionInput.emit(ev);
});
@@ -352,12 +356,16 @@ export class Searchbar extends Ion {
clearInput(ev: UIEvent) {
this.ionClear.emit(ev);
- if (isPresent(this._value) && this._value !== '') {
- this._value = '';
- this.onChange(this._value);
- this.ionInput.emit(ev);
- }
-
+ // setTimeout() fixes https://github.com/driftyco/ionic/issues/7527
+ // way for 4 frames
+ setTimeout(() => {
+ let value = this._value;
+ if (isPresent(value) && value !== '') {
+ this.value = ''; // DOM WRITE
+ this.onChange(this._value);
+ this.ionInput.emit(ev);
+ }
+ }, 16 * 4);
this._shouldBlur = false;
}
@@ -380,7 +388,7 @@ export class Searchbar extends Ion {
* Write a new value to the element.
*/
writeValue(val: any) {
- this._value = val;
+ this.value = val;
this.positionElements();
}