From 52ea7a34e2e810cffc1e3ed2a9ce7989c0408747 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 29 Mar 2017 23:30:32 +0200 Subject: [PATCH] fix(select): wrong item order in label in rtl (#3567) Fixes selected items not having the proper order in the label when `md-select` is in `multiple` mode and in RTL. --- src/lib/select/select.spec.ts | 30 +++++++++++++++++++++++++++++- src/lib/select/select.ts | 15 ++++++++++++--- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 06b76d43c858..0350621ad0dd 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -26,7 +26,7 @@ import {wrappedErrorMessage} from '../core/testing/wrapped-error-message'; describe('MdSelect', () => { let overlayContainerElement: HTMLElement; - let dir: {value: string}; + let dir: {value: 'ltr'|'rtl'}; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -1571,6 +1571,23 @@ describe('MdSelect', () => { expect(fixture.componentInstance.control.value).toEqual(['steak-0', 'pizza-1', 'tacos-2']); }); + it('should sort the selected options in reverse in rtl', () => { + dir.value = 'rtl'; + trigger.click(); + fixture.detectChanges(); + + const options = overlayContainerElement.querySelectorAll('md-option') as + NodeListOf; + + options[2].click(); + options[0].click(); + options[1].click(); + fixture.detectChanges(); + + expect(trigger.textContent).toContain('Tacos, Pizza, Steak'); + expect(fixture.componentInstance.control.value).toEqual(['steak-0', 'pizza-1', 'tacos-2']); + }); + it('should sort the values, that get set via the model, based on the panel order', () => { trigger.click(); fixture.detectChanges(); @@ -1581,6 +1598,17 @@ describe('MdSelect', () => { expect(trigger.textContent).toContain('Steak, Pizza, Tacos'); }); + it('should reverse sort the values, that get set via the model in rtl', () => { + dir.value = 'rtl'; + trigger.click(); + fixture.detectChanges(); + + testInstance.control.setValue(['tacos-2', 'steak-0', 'pizza-1']); + fixture.detectChanges(); + + expect(trigger.textContent).toContain('Tacos, Pizza, Steak'); + }); + it('should throw an exception when trying to set a non-array value', () => { expect(() => { testInstance.control.setValue('not-an-array'); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 4a1afaa0c409..1ef4a0d28c1d 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -420,9 +420,18 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr /** The value displayed in the trigger. */ get triggerValue(): string { - return this.multiple ? - this._selectionModel.selected.map(option => option.viewValue).join(', ') : - this._selectionModel.selected[0].viewValue; + if (this._multiple) { + let selectedOptions = this._selectionModel.selected.map(option => option.viewValue); + + if (this._isRtl()) { + selectedOptions.reverse(); + } + + // TODO(crisbeto): delimiter should be configurable for proper localization. + return selectedOptions.join(', '); + } + + return this._selectionModel.selected[0].viewValue; } /** Whether the element is in RTL mode. */