diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss
index 9e103aec07..55d826173f 100644
--- a/ionic/components/search-bar/modes/ios.scss
+++ b/ionic/components/search-bar/modes/ios.scss
@@ -20,7 +20,7 @@ $search-bar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05,
$search-bar-ios-input-close-icon-color: #8F8E94 !default;
$search-bar-ios-input-close-icon-svg: "" !default;
-$search-bar-ios-input-close-icon-size: 17px !default;
+$search-bar-ios-input-close-icon-size: 18px !default;
ion-search-bar {
@@ -67,15 +67,16 @@ ion-search-bar {
}
.search-bar-close-icon {
- width: $search-bar-ios-input-close-icon-size;
- height: $search-bar-ios-input-close-icon-size;
+ width: 30px;
+ height: 100%;
@include svg-background-image($search-bar-ios-input-close-icon-svg);
background-size: $search-bar-ios-input-close-icon-size;
background-repeat: no-repeat;
+ background-position: center;
position: absolute;
- right: 10px;
- top: 6px;
+ right: 0;
+ top: 0;
}
.search-bar-cancel {
diff --git a/ionic/components/search-bar/modes/md.scss b/ionic/components/search-bar/modes/md.scss
index 91051e4bc2..1539ad7a2d 100644
--- a/ionic/components/search-bar/modes/md.scss
+++ b/ionic/components/search-bar/modes/md.scss
@@ -60,14 +60,17 @@ ion-search-bar {
.search-bar-close-icon {
width: $search-bar-md-input-close-icon-size;
- height: $search-bar-md-input-close-icon-size;
+ height: 100%;
+ padding: 0;
@include svg-background-image($search-bar-md-input-close-icon-svg);
background-size: $search-bar-md-input-close-icon-size;
background-repeat: no-repeat;
+ background-position: center;
position: absolute;
right: 13px;
- top: 13px;
+ top: 0;
+
}
.search-bar-cancel {
diff --git a/ionic/components/search-bar/search-bar.scss b/ionic/components/search-bar/search-bar.scss
index b3e64243c6..86f63abbd1 100644
--- a/ionic/components/search-bar/search-bar.scss
+++ b/ionic/components/search-bar/search-bar.scss
@@ -31,3 +31,9 @@ input[type="search"].search-bar-input {
line-height: 3rem;
@include appearance(none);
}
+
+.search-bar-close-icon {
+ min-height: 0;
+ padding: 0;
+ margin: 0;
+}
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index b2f1062889..05cae96396 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -18,30 +18,26 @@ import {ConfigComponent} from '../../config/decorators';
selector: 'ion-search-bar',
inputs: [
'list',
- 'query'
+ 'query',
+ 'model' : 'ngModel'
],
defaultInputs: {
'showCancel': false,
'cancelText': 'Cancel',
'placeholder': 'Search',
- 'cancelAction': function() {
- // TODO user will override this if they pass a function
- // need to allow user to call these
+ 'cancelAction': function(event, model) {
+ // The cancel button now works on its own to blur the input
console.log('Default Cancel');
- this.isFocused = false;
- this.shouldLeftAlign = this.value.trim() != '';
- this.element = this.elementRef.nativeElement.querySelector('input');
- this.element.blur();
}
},
template:
'' +
- '',
+ '',
directives: [FORM_DIRECTIVES, NgIf, NgClass]
})
@@ -80,6 +76,9 @@ export class SearchBar extends Ion {
this.cancelWidth = this.cancelButton.offsetWidth;
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
+
+ // If the user passes in a value to the model we should left align
+ this.shouldLeftAlign = this.model && this.model.trim() != '';
}
/**
@@ -87,21 +86,19 @@ export class SearchBar extends Ion {
* ControlDirective to update the value internally.
*/
writeValue(value) {
- this.value = value;
- this.renderer.setElementProperty(this.elementRef, 'value', this.value);
-
+ this.model = value;
}
- registerOnChange(val) {
+ registerOnChange(fn) {
+ this.onChange = fn;
}
- registerOnTouched(val) {
+ registerOnTouched(fn) {
+ this.onTouched = fn;
}
inputChanged(event) {
- this.value = event.target.value;
- this.ngControl.valueAccessor.writeValue(this.value);
- this.ngControl.control.updateValue(this.value);
+ this.onChange(event.target.value);
}
inputFocused() {
@@ -112,18 +109,19 @@ export class SearchBar extends Ion {
this.cancelButton.style.marginRight = "0px";
}
}
+
inputBlurred() {
this.isFocused = false;
- this.shouldLeftAlign = this.value.trim() != '';
+ this.shouldLeftAlign = this.model && this.model.trim() != '';
if (this.cancelButton) {
this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px";
}
}
- clearInput() {
- this.value = '';
- this.ngControl.control.updateValue('');
+ clearInput(event) {
+ this.model = '';
+ this.onChange(this.model);
}
}
diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts
index 81af9b462a..d76585b913 100644
--- a/ionic/components/search-bar/test/floating/index.ts
+++ b/ionic/components/search-bar/test/floating/index.ts
@@ -1,26 +1,26 @@
-import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
import {App} from 'ionic/ionic';
import {SearchPipe} from 'ionic/components/search-bar/search-bar';
@App({
templateUrl: 'main.html',
- bindings: [NgControl, FormBuilder],
directives: [FORM_DIRECTIVES]
})
class IonicApp {
- constructor(fb: FormBuilder) {
- this.form = fb.group({
- defaultSearch: ['', Validators.required],
- customPlaceholder: ['', Validators.required],
- defaultCancel: ['', Validators.required],
- customCancel: ['', Validators.required],
- customCancelLong: ['', Validators.required],
- customCancelAction: ['', Validators.required],
- });
+ defaultSearch: string;
+ customPlaceholder: string;
+ defaultCancel: string;
+ customCancel: string;
+ customCancelLong: string;
+ customCancelAction: string;
+ clickedCustomAction: boolean = false;
+
+ constructor() {
+
}
- myCancelAction = function() {
- console.log('myCancelAction');
- alert("My custom action!");
+
+ myCancelAction(event, model) {
+ console.log("TODO get app property");
}
}
diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html
index 1468de3ba4..550270944a 100644
--- a/ionic/components/search-bar/test/floating/main.html
+++ b/ionic/components/search-bar/test/floating/main.html
@@ -1,21 +1,23 @@
-
+ Search - Custom Cancel Action
+
+
+
+ Clicked custom action with input = {{customCancelAction}}
+