Skip to content

Commit 32cf848

Browse files
committed
fix(select): wrong item order in label in rtl
Fixes selected items not having the proper order in the label when `md-select` is in `multiple` mode and in RTL.
1 parent cdb3763 commit 32cf848

File tree

2 files changed

+40
-4
lines changed

2 files changed

+40
-4
lines changed

src/lib/select/select.spec.ts

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {dispatchFakeEvent} from '../core/testing/dispatch-events';
2323

2424
describe('MdSelect', () => {
2525
let overlayContainerElement: HTMLElement;
26-
let dir: {value: string};
26+
let dir: {value: 'ltr'|'rtl'};
2727

2828
beforeEach(async(() => {
2929
TestBed.configureTestingModule({
@@ -1553,6 +1553,23 @@ describe('MdSelect', () => {
15531553
expect(fixture.componentInstance.control.value).toEqual(['steak-0', 'pizza-1', 'tacos-2']);
15541554
});
15551555

1556+
it('should sort the selected options in reverse in rtl', () => {
1557+
dir.value = 'rtl';
1558+
trigger.click();
1559+
fixture.detectChanges();
1560+
1561+
const options = overlayContainerElement.querySelectorAll('md-option') as
1562+
NodeListOf<HTMLElement>;
1563+
1564+
options[2].click();
1565+
options[0].click();
1566+
options[1].click();
1567+
fixture.detectChanges();
1568+
1569+
expect(trigger.textContent).toContain('Tacos, Pizza, Steak');
1570+
expect(fixture.componentInstance.control.value).toEqual(['steak-0', 'pizza-1', 'tacos-2']);
1571+
});
1572+
15561573
it('should sort the values, that get set via the model, based on the panel order', () => {
15571574
trigger.click();
15581575
fixture.detectChanges();
@@ -1563,6 +1580,17 @@ describe('MdSelect', () => {
15631580
expect(trigger.textContent).toContain('Steak, Pizza, Tacos');
15641581
});
15651582

1583+
it('should reverse sort the values, that get set via the model in rtl', () => {
1584+
dir.value = 'rtl';
1585+
trigger.click();
1586+
fixture.detectChanges();
1587+
1588+
testInstance.control.setValue(['tacos-2', 'steak-0', 'pizza-1']);
1589+
fixture.detectChanges();
1590+
1591+
expect(trigger.textContent).toContain('Tacos, Pizza, Steak');
1592+
});
1593+
15661594
it('should throw an exception when trying to set a non-array value', () => {
15671595
expect(() => {
15681596
testInstance.control.setValue('not-an-array');

src/lib/select/select.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -413,9 +413,17 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
413413

414414
/** The value displayed in the trigger. */
415415
get triggerValue(): string {
416-
return this.multiple ?
417-
this._selectionModel.selected.map(option => option.viewValue).join(', ') :
418-
this._selectionModel.selected[0].viewValue;
416+
if (this._multiple) {
417+
let array = this._selectionModel.selected.map(option => option.viewValue);
418+
419+
if (this._isRtl()) {
420+
array.reverse();
421+
}
422+
423+
return array.join(', ');
424+
}
425+
426+
return this._selectionModel.selected[0].viewValue;
419427
}
420428

421429
/** Whether the element is in RTL mode. */

0 commit comments

Comments
 (0)