This commit is contained in:
Manuel Mtz-Almeida
2017-03-29 14:11:19 +02:00
parent 47e1cdce9d
commit c9851442c6
4 changed files with 14 additions and 15 deletions

View File

@ -16,7 +16,7 @@ export class PageOne {
filterItems(ev: any) { filterItems(ev: any) {
this.setItems(); this.setItems();
let val = ev.target.value; let val = ev.value;
if (val && val.trim() !== '') { if (val && val.trim() !== '') {
this.items = this.items.filter(function(item) { this.items = this.items.filter(function(item) {

View File

@ -47,7 +47,8 @@ import { Platform } from '../../platform/platform';
'[class.searchbar-has-value]': '_value', '[class.searchbar-has-value]': '_value',
'[class.searchbar-active]': '_isActive', '[class.searchbar-active]': '_isActive',
'[class.searchbar-show-cancel]': '_showCancelButton', '[class.searchbar-show-cancel]': '_showCancelButton',
'[class.searchbar-left-aligned]': '_shouldAlignLeft' '[class.searchbar-left-aligned]': '_shouldAlignLeft',
'[class.searchbar-has-focus]': '_isFocus'
}, },
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
@ -150,10 +151,6 @@ export class Searchbar extends BaseInput<string> {
*/ */
@Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>(); @Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
/**
* @hidden
*/
@HostBinding('class.searchbar-has-focus') _sbHasFocus: boolean;
constructor( constructor(
config: Config, config: Config,
@ -213,7 +210,7 @@ export class Searchbar extends BaseInput<string> {
positionElements() { positionElements() {
const isAnimated = this._animated; const isAnimated = this._animated;
const prevAlignLeft = this._shouldAlignLeft; const prevAlignLeft = this._shouldAlignLeft;
const shouldAlignLeft = (!isAnimated || (this._value && this._value.toString().trim() !== '') || this._sbHasFocus === true); const shouldAlignLeft = (!isAnimated || (this._value && this._value.toString().trim() !== '') || this._isFocus === true);
this._shouldAlignLeft = shouldAlignLeft; this._shouldAlignLeft = shouldAlignLeft;
if (this._mode !== 'ios') { if (this._mode !== 'ios') {
@ -268,7 +265,7 @@ export class Searchbar extends BaseInput<string> {
if (!this._cancelButton || !this._cancelButton.nativeElement) { if (!this._cancelButton || !this._cancelButton.nativeElement) {
return; return;
} }
const showShowCancel = this._sbHasFocus; const showShowCancel = this._isFocus;
if (showShowCancel !== this._isCancelVisible) { if (showShowCancel !== this._isCancelVisible) {
var cancelStyleEle = this._cancelButton.nativeElement; var cancelStyleEle = this._cancelButton.nativeElement;
var cancelStyle = cancelStyleEle.style; var cancelStyle = cancelStyleEle.style;
@ -298,8 +295,9 @@ export class Searchbar extends BaseInput<string> {
* Sets the Searchbar to focused and active on input focus. * Sets the Searchbar to focused and active on input focus.
*/ */
inputFocused(ev: UIEvent) { inputFocused(ev: UIEvent) {
this._fireFocus();
this._isActive = true; this._isActive = true;
this._fireFocus();
this.positionElements();
} }
/** /**
@ -316,6 +314,7 @@ export class Searchbar extends BaseInput<string> {
return; return;
} }
this._fireBlur(); this._fireBlur();
this.positionElements();
} }
/** /**

View File

@ -19,23 +19,23 @@ export class RootPage {
} }
onClearSearchbar(ev: any) { onClearSearchbar(ev: any) {
console.log('ionClear', ev.target.value); console.log('ionClear', ev.value);
} }
onCancelSearchbar(ev: any) { onCancelSearchbar(ev: any) {
console.log('ionCancel', ev.target.value); console.log('ionCancel', ev.value);
} }
triggerInput(ev: any) { triggerInput(ev: any) {
console.log('ionInput', ev.target.value); console.log('ionInput', ev.value);
} }
inputBlurred(ev: any) { inputBlurred(ev: any) {
console.log('ionBlur', ev.target.value); console.log('ionBlur', ev.value);
} }
inputFocused(ev: any) { inputFocused(ev: any) {
console.log('ionFocus', ev.target.value); console.log('ionFocus', ev.value);
} }
ngAfterViewInit() { ngAfterViewInit() {

View File

@ -63,7 +63,7 @@ export class SearchPage {
this.initializeItems(); this.initializeItems();
// set q to the value of the searchbar // set q to the value of the searchbar
var q = ev.target.value; var q = ev.value;
// if the value is an empty string don't filter the items // if the value is an empty string don't filter the items
if (!q || q.trim() === '') { if (!q || q.trim() === '') {