Skip to content

Commit 00c37cc

Browse files
EduardF97EduardF1
EduardF97
authored and
EduardF1
committed
fix(material/list): remove pointer cursor for disabled selection list radios
1 parent 2966309 commit 00c37cc

4 files changed

Lines changed: 61 additions & 36 deletions

File tree

‎src/material/list/list.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ $fallbacks: m3-list.get-tokens();
4040
.mdc-checkbox {
4141
opacity: token-utils.slot(list-list-item-disabled-label-text-opacity, $fallbacks);
4242
}
43+
44+
.mdc-radio {
45+
cursor: auto;
46+
}
4347
}
4448

4549
// In Angular Material we put the avatar class directly on the .mdc-list-item__start element,

‎src/material/list/list.spec.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ class BaseTestList {
417417
</a>
418418
</mat-list>`,
419419
imports: [MatListModule],
420-
changeDetection: ChangeDetectionStrategy.Eager,
420+
changeDetection: ChangeDetectionStrategy.Default,
421421
})
422422
class ListWithOneAnchorItem extends BaseTestList {
423423
// This needs to be declared directly on the class; if declared on the BaseTestList superclass,
@@ -433,7 +433,7 @@ class ListWithOneAnchorItem extends BaseTestList {
433433
</a>
434434
</mat-nav-list>`,
435435
imports: [MatListModule],
436-
changeDetection: ChangeDetectionStrategy.Eager,
436+
changeDetection: ChangeDetectionStrategy.Default,
437437
})
438438
class NavListWithOneAnchorItem extends BaseTestList {
439439
@ViewChildren(MatListItem) listItems!: QueryList<MatListItem>;
@@ -452,7 +452,7 @@ class NavListWithOneAnchorItem extends BaseTestList {
452452
}
453453
</mat-nav-list>`,
454454
imports: [MatListModule],
455-
changeDetection: ChangeDetectionStrategy.Eager,
455+
changeDetection: ChangeDetectionStrategy.Default,
456456
})
457457
class NavListWithActivatedItem extends BaseTestList {
458458
@ViewChildren(MatListItem) listItems!: QueryList<MatListItem>;
@@ -471,7 +471,7 @@ class NavListWithActivatedItem extends BaseTestList {
471471
</button>
472472
</mat-action-list>`,
473473
imports: [MatListModule],
474-
changeDetection: ChangeDetectionStrategy.Eager,
474+
changeDetection: ChangeDetectionStrategy.Default,
475475
})
476476
class ActionListWithoutType extends BaseTestList {
477477
@ViewChildren(MatListItem) listItems!: QueryList<MatListItem>;
@@ -487,7 +487,7 @@ class ActionListWithoutType extends BaseTestList {
487487
</button>
488488
</mat-action-list>`,
489489
imports: [MatListModule],
490-
changeDetection: ChangeDetectionStrategy.Eager,
490+
changeDetection: ChangeDetectionStrategy.Default,
491491
})
492492
class ActionListWithType extends BaseTestList {
493493
@ViewChildren(MatListItem) listItems!: QueryList<MatListItem>;
@@ -501,7 +501,7 @@ class ActionListWithType extends BaseTestList {
501501
}
502502
</mat-action-list>`,
503503
imports: [MatListModule],
504-
changeDetection: ChangeDetectionStrategy.Eager,
504+
changeDetection: ChangeDetectionStrategy.Default,
505505
})
506506
class ActionListWithDisabledList extends BaseTestList {
507507
disableList = true;
@@ -515,7 +515,7 @@ class ActionListWithDisabledList extends BaseTestList {
515515
</button>
516516
</mat-action-list>`,
517517
imports: [MatListModule],
518-
changeDetection: ChangeDetectionStrategy.Eager,
518+
changeDetection: ChangeDetectionStrategy.Default,
519519
})
520520
class ActionListWithDisabledItem extends BaseTestList {
521521
@ViewChild(MatListItem) buttonItem!: MatListItem;
@@ -530,7 +530,7 @@ class ActionListWithDisabledItem extends BaseTestList {
530530
</mat-list-item>
531531
</mat-list>`,
532532
imports: [MatListModule],
533-
changeDetection: ChangeDetectionStrategy.Eager,
533+
changeDetection: ChangeDetectionStrategy.Default,
534534
})
535535
class ListWithOneItem extends BaseTestList {}
536536

@@ -546,7 +546,7 @@ class ListWithOneItem extends BaseTestList {}
546546
}
547547
</mat-list>`,
548548
imports: [MatListModule],
549-
changeDetection: ChangeDetectionStrategy.Eager,
549+
changeDetection: ChangeDetectionStrategy.Default,
550550
})
551551
class ListWithTwoLineItem extends BaseTestList {}
552552

@@ -562,7 +562,7 @@ class ListWithTwoLineItem extends BaseTestList {}
562562
}
563563
</mat-list>`,
564564
imports: [MatListModule],
565-
changeDetection: ChangeDetectionStrategy.Eager,
565+
changeDetection: ChangeDetectionStrategy.Default,
566566
})
567567
class ListWithThreeLineItem extends BaseTestList {}
568568

@@ -578,7 +578,7 @@ class ListWithThreeLineItem extends BaseTestList {}
578578
</mat-list-item>
579579
</mat-list>`,
580580
imports: [MatListModule],
581-
changeDetection: ChangeDetectionStrategy.Eager,
581+
changeDetection: ChangeDetectionStrategy.Default,
582582
})
583583
class ListWithAvatar extends BaseTestList {}
584584

@@ -593,7 +593,7 @@ class ListWithAvatar extends BaseTestList {}
593593
}
594594
</mat-list>`,
595595
imports: [MatListModule],
596-
changeDetection: ChangeDetectionStrategy.Eager,
596+
changeDetection: ChangeDetectionStrategy.Default,
597597
})
598598
class ListWithItemWithCssClass extends BaseTestList {}
599599

@@ -611,7 +611,7 @@ class ListWithItemWithCssClass extends BaseTestList {}
611611
}
612612
</mat-list>`,
613613
imports: [MatListModule],
614-
changeDetection: ChangeDetectionStrategy.Eager,
614+
changeDetection: ChangeDetectionStrategy.Default,
615615
})
616616
class ListWithDynamicNumberOfLines extends BaseTestList {}
617617

@@ -623,7 +623,7 @@ class ListWithDynamicNumberOfLines extends BaseTestList {}
623623
}
624624
</mat-list>`,
625625
imports: [MatListModule],
626-
changeDetection: ChangeDetectionStrategy.Eager,
626+
changeDetection: ChangeDetectionStrategy.Default,
627627
})
628628
class ListWithMultipleItems extends BaseTestList {}
629629

@@ -635,7 +635,7 @@ class ListWithMultipleItems extends BaseTestList {}
635635
<mat-list-item>Three</mat-list-item>
636636
</mat-list>`,
637637
imports: [MatListModule],
638-
changeDetection: ChangeDetectionStrategy.Eager,
638+
changeDetection: ChangeDetectionStrategy.Default,
639639
})
640640
class ListWithDisabledItems {
641641
firstItemDisabled = false;
@@ -645,6 +645,6 @@ class ListWithDisabledItems {
645645
@Component({
646646
template: `<mat-list-item></mat-list-item>`,
647647
imports: [MatListModule],
648-
changeDetection: ChangeDetectionStrategy.Eager,
648+
changeDetection: ChangeDetectionStrategy.Default,
649649
})
650650
class StandaloneListItem {}

‎src/material/list/selection-list.spec.ts‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -840,6 +840,17 @@ describe('MatSelectionList without forms', () => {
840840
expect(selectList.selected.length).toBe(0);
841841
});
842842

843+
it('should not show a pointer cursor around radios in disabled single-selection lists', () => {
844+
fixture.destroy();
845+
846+
const singleSelectionFixture = TestBed.createComponent(DisabledSingleSelectionList);
847+
singleSelectionFixture.detectChanges();
848+
849+
const radio = singleSelectionFixture.nativeElement.querySelector('.mdc-radio')!;
850+
851+
expect(getComputedStyle(radio).cursor).toBe('auto');
852+
});
853+
843854
it('should update state of options if list state has changed', () => {
844855
const testOption = listOption[2].componentInstance as MatListOption;
845856

@@ -1699,7 +1710,7 @@ describe('MatSelectionList with forms', () => {
16991710
}
17001711
</mat-selection-list>`,
17011712
imports: [MatListModule],
1702-
changeDetection: ChangeDetectionStrategy.Eager,
1713+
changeDetection: ChangeDetectionStrategy.Default,
17031714
})
17041715
class SelectionListWithListOptions {
17051716
showLastOption = true;
@@ -1728,7 +1739,7 @@ class SelectionListWithListOptions {
17281739
</mat-list-option>
17291740
</mat-selection-list>`,
17301741
imports: [MatListModule],
1731-
changeDetection: ChangeDetectionStrategy.Eager,
1742+
changeDetection: ChangeDetectionStrategy.Default,
17321743
})
17331744
class SelectionListWithCheckboxPositionAfter {}
17341745

@@ -1749,20 +1760,30 @@ class SelectionListWithCheckboxPositionAfter {}
17491760
</mat-list-option>
17501761
</mat-selection-list>`,
17511762
imports: [MatListModule],
1752-
changeDetection: ChangeDetectionStrategy.Eager,
1763+
changeDetection: ChangeDetectionStrategy.Default,
17531764
})
17541765
class SelectionListWithListDisabled {
17551766
disabled: boolean = true;
17561767
}
17571768

1769+
@Component({
1770+
template: `
1771+
<mat-selection-list [disabled]="true" [multiple]="false">
1772+
<mat-list-option>Inbox</mat-list-option>
1773+
</mat-selection-list>`,
1774+
imports: [MatListModule],
1775+
changeDetection: ChangeDetectionStrategy.Default,
1776+
})
1777+
class DisabledSingleSelectionList {}
1778+
17581779
@Component({
17591780
template: `
17601781
<mat-selection-list>
17611782
<mat-list-option [disabled]="disableItem">Item</mat-list-option>
17621783
</mat-selection-list>
17631784
`,
17641785
imports: [MatListModule],
1765-
changeDetection: ChangeDetectionStrategy.Eager,
1786+
changeDetection: ChangeDetectionStrategy.Default,
17661787
})
17671788
class SelectionListWithDisabledOption {
17681789
disableItem: boolean = false;
@@ -1777,7 +1798,7 @@ class SelectionListWithDisabledOption {
17771798
<mat-list-option>Not selected - Item #4</mat-list-option>
17781799
</mat-selection-list>`,
17791800
imports: [MatListModule],
1780-
changeDetection: ChangeDetectionStrategy.Eager,
1801+
changeDetection: ChangeDetectionStrategy.Default,
17811802
})
17821803
class SelectionListWithSelectedOption {}
17831804

@@ -1788,7 +1809,7 @@ class SelectionListWithSelectedOption {}
17881809
<mat-list-option [selected]="true">Pre-selected - Item #2</mat-list-option>
17891810
</mat-selection-list>`,
17901811
imports: [MatListModule],
1791-
changeDetection: ChangeDetectionStrategy.Eager,
1812+
changeDetection: ChangeDetectionStrategy.Default,
17921813
})
17931814
class SingleSelectionListWithSelectedOption {}
17941815

@@ -1798,7 +1819,7 @@ class SingleSelectionListWithSelectedOption {}
17981819
<mat-list-option [selected]="true" [value]="itemValue">Item</mat-list-option>
17991820
</mat-selection-list>`,
18001821
imports: [MatListModule],
1801-
changeDetection: ChangeDetectionStrategy.Eager,
1822+
changeDetection: ChangeDetectionStrategy.Default,
18021823
})
18031824
class SelectionListWithSelectedOptionAndValue {
18041825
itemValue = 'item1';
@@ -1815,7 +1836,7 @@ class SelectionListWithSelectedOptionAndValue {
18151836
}
18161837
</mat-selection-list>`,
18171838
imports: [MatListModule, FormsModule, ReactiveFormsModule],
1818-
changeDetection: ChangeDetectionStrategy.Eager,
1839+
changeDetection: ChangeDetectionStrategy.Default,
18191840
})
18201841
class SelectionListWithModel {
18211842
modelChangeSpy = jasmine.createSpy('model change spy');
@@ -1838,7 +1859,7 @@ class SelectionListWithModel {
18381859
}
18391860
`,
18401861
imports: [MatListModule, FormsModule, ReactiveFormsModule],
1841-
changeDetection: ChangeDetectionStrategy.Eager,
1862+
changeDetection: ChangeDetectionStrategy.Default,
18421863
})
18431864
class SelectionListWithFormControl {
18441865
formControl = new FormControl([] as string[]);
@@ -1853,7 +1874,7 @@ class SelectionListWithFormControl {
18531874
<mat-list-option value="opt2" selected>Option 2</mat-list-option>
18541875
</mat-selection-list>`,
18551876
imports: [MatListModule, FormsModule, ReactiveFormsModule],
1856-
changeDetection: ChangeDetectionStrategy.Eager,
1877+
changeDetection: ChangeDetectionStrategy.Default,
18571878
})
18581879
class SelectionListWithPreselectedOption {
18591880
selectedOptions!: string[];
@@ -1866,7 +1887,7 @@ class SelectionListWithPreselectedOption {
18661887
<mat-list-option value="opt2" selected>Option 2</mat-list-option>
18671888
</mat-selection-list>`,
18681889
imports: [MatListModule, FormsModule, ReactiveFormsModule],
1869-
changeDetection: ChangeDetectionStrategy.Eager,
1890+
changeDetection: ChangeDetectionStrategy.Default,
18701891
})
18711892
class SelectionListWithPreselectedOptionAndModel {
18721893
selectedOptions = ['opt1'];
@@ -1895,7 +1916,7 @@ class SelectionListWithPreselectedFormControlOnPush {
18951916
}
18961917
</mat-selection-list>`,
18971918
imports: [MatListModule, FormsModule, ReactiveFormsModule],
1898-
changeDetection: ChangeDetectionStrategy.Eager,
1919+
changeDetection: ChangeDetectionStrategy.Default,
18991920
})
19001921
class SelectionListWithCustomComparator {
19011922
@ViewChildren(MatListOption) optionInstances!: QueryList<MatListOption>;
@@ -1918,7 +1939,7 @@ class SelectionListWithCustomComparator {
19181939
</mat-selection-list>
19191940
`,
19201941
imports: [MatListModule],
1921-
changeDetection: ChangeDetectionStrategy.Eager,
1942+
changeDetection: ChangeDetectionStrategy.Default,
19221943
})
19231944
class SelectionListWithAvatar {
19241945
togglePosition!: MatListOptionTogglePosition;
@@ -1934,7 +1955,7 @@ class SelectionListWithAvatar {
19341955
</mat-selection-list>
19351956
`,
19361957
imports: [MatListModule],
1937-
changeDetection: ChangeDetectionStrategy.Eager,
1958+
changeDetection: ChangeDetectionStrategy.Default,
19381959
})
19391960
class SelectionListWithIcon {
19401961
togglePosition!: MatListOptionTogglePosition;
@@ -1950,7 +1971,7 @@ class SelectionListWithIcon {
19501971
}
19511972
</mat-selection-list>`,
19521973
imports: [MatListModule],
1953-
changeDetection: ChangeDetectionStrategy.Eager,
1974+
changeDetection: ChangeDetectionStrategy.Default,
19541975
})
19551976
class SelectionListWithIndirectChildOptions {
19561977
@ViewChildren(MatListOption) optionInstances!: QueryList<MatListOption>;
@@ -1963,7 +1984,7 @@ class SelectionListWithIndirectChildOptions {
19631984
</mat-selection-list>
19641985
`,
19651986
imports: [MatListModule],
1966-
changeDetection: ChangeDetectionStrategy.Eager,
1987+
changeDetection: ChangeDetectionStrategy.Default,
19671988
})
19681989
class ListOptionWithTwoWayBinding {
19691990
selected = false;

‎src/material/list/testing/list-harness.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -526,7 +526,7 @@ describe('MatSelectionListHarness', () => {
526526
<mat-list class="test-empty"></mat-list>
527527
`,
528528
imports: [MatListModule],
529-
changeDetection: ChangeDetectionStrategy.Eager,
529+
changeDetection: ChangeDetectionStrategy.Default,
530530
})
531531
class ListHarnessTest {
532532
disableThirdItem = signal(false);
@@ -567,7 +567,7 @@ class ListHarnessTest {
567567
<mat-action-list class="test-empty"></mat-action-list>
568568
`,
569569
imports: [MatListModule],
570-
changeDetection: ChangeDetectionStrategy.Eager,
570+
changeDetection: ChangeDetectionStrategy.Default,
571571
})
572572
class ActionListHarnessTest {
573573
lastClicked!: string;
@@ -610,7 +610,7 @@ class ActionListHarnessTest {
610610
<mat-nav-list class="test-empty"></mat-nav-list>
611611
`,
612612
imports: [MatListModule],
613-
changeDetection: ChangeDetectionStrategy.Eager,
613+
changeDetection: ChangeDetectionStrategy.Default,
614614
})
615615
class NavListHarnessTest {
616616
lastClicked!: string;
@@ -654,7 +654,7 @@ class NavListHarnessTest {
654654
<mat-selection-list class="test-empty" disabled></mat-selection-list>
655655
`,
656656
imports: [MatListModule],
657-
changeDetection: ChangeDetectionStrategy.Eager,
657+
changeDetection: ChangeDetectionStrategy.Default,
658658
})
659659
class SelectionListHarnessTest {
660660
disableThirdItem = signal(false);

0 commit comments

Comments
 (0)