Skip to content

Commit 4eb7a54

Browse files
committed
fix(sort): remove arrow when sort header is disabled
Doesn't render the arrow for a disabled header, unless it is the active one. This prevents it from taking up space when it won't be used. Fixes #14986.
1 parent aff565a commit 4eb7a54

File tree

4 files changed

+33
-1
lines changed

4 files changed

+33
-1
lines changed

src/lib/sort/sort-header.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
<!-- Disable animations while a current animation is running -->
1313
<div class="mat-sort-header-arrow"
14+
*ngIf="_renderArrow()"
1415
[@arrowOpacity]="_getArrowViewState()"
1516
[@arrowPosition]="_getArrowViewState()"
1617
[@allowChildren]="_getArrowDirectionState()"

src/lib/sort/sort-header.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -289,4 +289,9 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
289289

290290
return this._sort.direction == 'asc' ? 'ascending' : 'descending';
291291
}
292+
293+
/** Gets whether the arrow inside the sort header should be rendered. */
294+
_renderArrow() {
295+
return !this._isDisabled() || this._isSorted();
296+
}
292297
}

src/lib/sort/sort.spec.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import {
3131

3232
describe('MatSort', () => {
3333
let fixture: ComponentFixture<SimpleMatSortApp>;
34-
3534
let component: SimpleMatSortApp;
3635

3736
beforeEach(async(() => {
@@ -384,6 +383,32 @@ describe('MatSort', () => {
384383
expect(button.getAttribute('aria-label')).toBe('Sort all of the things');
385384
})
386385
);
386+
387+
it('should not render the arrow if sorting is disabled for that column', fakeAsync(() => {
388+
const sortHeaderElement = fixture.nativeElement.querySelector('#defaultA');
389+
390+
// Switch sorting to a different column before asserting.
391+
component.sort('defaultB');
392+
fixture.componentInstance.disabledColumnSort = true;
393+
fixture.detectChanges();
394+
tick();
395+
fixture.detectChanges();
396+
397+
expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeFalsy();
398+
}));
399+
400+
it('should render the arrow if a disabled column is being sorted by', fakeAsync(() => {
401+
const sortHeaderElement = fixture.nativeElement.querySelector('#defaultA');
402+
403+
component.sort('defaultA');
404+
fixture.componentInstance.disabledColumnSort = true;
405+
fixture.detectChanges();
406+
tick();
407+
fixture.detectChanges();
408+
409+
expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeTruthy();
410+
}));
411+
387412
});
388413

389414
/**

tools/public_api_guard/lib/sort.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export declare class MatSortHeader extends _MatSortHeaderMixinBase implements Ca
7171
_handleClick(): void;
7272
_isDisabled(): boolean;
7373
_isSorted(): boolean;
74+
_renderArrow(): boolean;
7475
_setAnimationTransitionState(viewState: ArrowViewStateTransition): void;
7576
_setIndicatorHintVisible(visible: boolean): void;
7677
_updateArrowDirection(): void;

0 commit comments

Comments
 (0)