From 874b02c84af295d5945f6ed8bcd73a9852dd018a Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 12 Mar 2017 11:34:12 +0100
Subject: [PATCH] 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.
---
 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 a428799717e9..5e73e5467c8a 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -23,7 +23,7 @@ import {dispatchFakeEvent} from '../core/testing/dispatch-events';
 
 describe('MdSelect', () => {
   let overlayContainerElement: HTMLElement;
-  let dir: {value: string};
+  let dir: {value: 'ltr'|'rtl'};
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -1553,6 +1553,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<HTMLElement>;
+
+      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();
@@ -1563,6 +1580,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 32915f501b2c..8630d5737b4b 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -413,9 +413,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. */