Skip to content

Commit f1b78d4

Browse files
crisbetotinayuangao
authored andcommitted
compat: selection list not working in compatibility mode (#6801)
Fixes the selection list not working in M1 compatibility mode. Fixes #6746.
1 parent 87d607e commit f1b78d4

File tree

2 files changed

+16
-8
lines changed

2 files changed

+16
-8
lines changed

src/lib/list/list-option.html

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
<div class="mat-list-item-content" [class.mat-list-item-content-reverse]="checkboxPosition == 'after'" [class.mat-list-item-disabled]="disabled">
2-
<div class="mat-list-item-ripple" md-ripple
3-
[mdRippleTrigger]="_getHostElement()"
4-
[mdRippleDisabled]="_isRippleDisabled()">
5-
</div>
1+
<div class="mat-list-item-content"
2+
[class.mat-list-item-content-reverse]="checkboxPosition == 'after'"
3+
[class.mat-list-item-disabled]="disabled">
4+
5+
<div md-ripple
6+
class="mat-list-item-ripple"
7+
[mdRippleTrigger]="_getHostElement()"
8+
[mdRippleDisabled]="_isRippleDisabled()"></div>
9+
10+
<md-pseudo-checkbox #autocheckbox
11+
[state]="selected ? 'checked' : 'unchecked'"
12+
[disabled]="disabled"></md-pseudo-checkbox>
613

7-
<md-pseudo-checkbox [state]="selected ? 'checked' : 'unchecked'" #autocheckbox [disabled]="disabled"></md-pseudo-checkbox>
814
<div class="mat-list-text"><ng-content></ng-content></div>
915

1016
</div>

src/lib/list/selection-list.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {CanDisable, mixinDisabled} from '../core/common-behaviors/disabled';
3333
import {RxChain, switchMap, startWith} from '../core/rxjs/index';
3434
import {merge} from 'rxjs/observable/merge';
3535
import {CanDisableRipple, mixinDisableRipple} from '../core/common-behaviors/disable-ripple';
36+
import {MATERIAL_COMPATIBILITY_MODE} from '../core/compatibility/compatibility';
37+
3638

3739
export class MdSelectionListBase {}
3840
export const _MdSelectionListMixinBase = mixinDisableRipple(mixinDisabled(MdSelectionListBase));
@@ -68,14 +70,14 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
6870
},
6971
templateUrl: 'list-option.html',
7072
encapsulation: ViewEncapsulation.None,
71-
changeDetection: ChangeDetectionStrategy.OnPush
73+
changeDetection: ChangeDetectionStrategy.OnPush,
74+
providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
7275
})
7376
export class MdListOption extends _MdListOptionMixinBase
7477
implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple {
7578

7679
private _lineSetter: MdLineSetter;
7780
private _selected: boolean = false;
78-
/** Whether the checkbox is disabled. */
7981
private _disabled: boolean = false;
8082
private _value: any;
8183

0 commit comments

Comments
 (0)