fix(select): fix select disabled state

This commit is contained in:
Adam Bradley
2016-01-27 23:03:05 -06:00
parent 0a04522d38
commit eb03159d08
3 changed files with 33 additions and 5 deletions

View File

@ -21,3 +21,9 @@ ion-select {
.item-multiple-inputs ion-select { .item-multiple-inputs ion-select {
position: relative; position: relative;
} }
.select-disabled,
.item-select-disabled ion-label {
opacity: 0.4;
pointer-events: none;
}

View File

@ -101,7 +101,9 @@ import {Option} from '../option/option';
'<div class="select-icon">' + '<div class="select-icon">' +
'<div class="select-icon-inner"></div>' + '<div class="select-icon-inner"></div>' +
'</div>' + '</div>' +
'<button [id]="id" ' + '<button aria-haspopup="true" ' +
'[id]="id" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' + '[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' + 'class="item-cover">' +
'</button>', '</button>',
@ -127,7 +129,6 @@ export class Select {
@Input() okText: string = 'OK'; @Input() okText: string = 'OK';
@Input() alertOptions: any = {}; @Input() alertOptions: any = {};
@Input() checked: any = false; @Input() checked: any = false;
@Input() disabled: boolean = false;
@Output() change: EventEmitter<any> = new EventEmitter(); @Output() change: EventEmitter<any> = new EventEmitter();
@ -161,10 +162,12 @@ export class Select {
*/ */
@HostListener('click', ['$event']) @HostListener('click', ['$event'])
private _click(ev) { private _click(ev) {
console.debug('select, open alert');
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
if (this._disabled) return;
console.debug('select, open alert');
// the user may have assigned some options specifically for the alert // the user may have assigned some options specifically for the alert
let alertOptions = merge({}, this.alertOptions); let alertOptions = merge({}, this.alertOptions);
@ -228,8 +231,10 @@ export class Select {
set value(val: any) { set value(val: any) {
// passed in value could be either an array, undefined or a string // passed in value could be either an array, undefined or a string
this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]); if (this._disabled) {
this.updateOptions(); this._values = (Array.isArray(val) ? val : isBlank(val) ? [] : [val]);
this.updateOptions();
}
} }
get text() { get text() {
@ -274,6 +279,16 @@ export class Select {
}); });
} }
@Input()
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = isTrueProperty(val);
this._item && this._item.setCssClass('item-select-disabled', this._disabled);
}
/** /**
* @private * @private
* Angular2 Forms API method called by the model (Control) on change to update * Angular2 Forms API method called by the model (Control) on change to update

View File

@ -39,6 +39,13 @@
</ion-select> </ion-select>
</ion-item> </ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-select multiple disabled>
<ion-option checked="true">Selected Text</ion-option>
</ion-select>
</ion-item>
<p aria-hidden="true" padding> <p aria-hidden="true" padding>
<code>toppings: {{toppings}}</code><br> <code>toppings: {{toppings}}</code><br>
<code>carFeatures: {{carFeatures}}</code><br> <code>carFeatures: {{carFeatures}}</code><br>