mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
fix(select): fix select disabled state
This commit is contained in:
@ -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;
|
||||||
|
}
|
@ -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
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user