From 1a17df6da67c02321595cffe4fa99dd90694376e Mon Sep 17 00:00:00 2001
From: Marie JONES <marie.jones@corp.ovh.com>
Date: Thu, 25 Oct 2018 13:47:57 +0200
Subject: [PATCH] fix(oui-select-picker): prevent leaving blank space

If no match value is defined an empty section is created
---
 packages/oui-select-picker/src/index.spec.js  | 24 +++++++++++++++++++
 .../oui-select-picker/src/select-picker.html  | 15 +++++++-----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/oui-select-picker/src/index.spec.js b/packages/oui-select-picker/src/index.spec.js
index 12a11be5..55353276 100644
--- a/packages/oui-select-picker/src/index.spec.js
+++ b/packages/oui-select-picker/src/index.spec.js
@@ -98,6 +98,30 @@ describe("ouiSelectPicker", () => {
                 const radioElement = getRadioInputElement(element);
                 expect(angular.element(radioElement).attr("value")).toEqual("aValue");
             });
+
+            it("should allow to pick one of values attribute", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[\'aValue\', \'bValue\']"></oui-select-picker>');
+
+                const selectElement = element[0].querySelector("oui-select");
+                expect(angular.element(selectElement)).not.toBeUndefined();
+
+                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                expect(angular.element(selectValues[0]).text().trim()).toEqual("aValue");
+            });
+
+            it("should display radio value according to match", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[{id: \'a\', name: \'aValue\'}]" match="name"></oui-select-picker>');
+
+                const value = element[0].querySelectorAll(".oui-select-picker__value");
+                expect(angular.element(value).text().trim()).toEqual("aValue");
+            });
+
+            it("should display select values according to match", () => {
+                const element = TestUtils.compileTemplate('<oui-select-picker values="[{id: \'a\', name: \'aValue\'}, {id: \'b\', name: \'bValue\'}]" match="name"></oui-select-picker>');
+
+                const selectValues = element[0].querySelectorAll(".oui-dropdown-option");
+                expect(angular.element(selectValues[1]).text().trim()).toEqual("bValue");
+            });
         });
 
         describe("disabled attribute", () => {
diff --git a/packages/oui-select-picker/src/select-picker.html b/packages/oui-select-picker/src/select-picker.html
index 630b2daa..ceecbfd3 100644
--- a/packages/oui-select-picker/src/select-picker.html
+++ b/packages/oui-select-picker/src/select-picker.html
@@ -28,10 +28,13 @@
             ng-bind=":: $ctrl.description"
             ng-if="$ctrl.description"></span>
     <span class="oui-select-picker__value-container oui-select-picker__section"
-        ng-if="$ctrl.values.length">
+            ng-if="$ctrl.values.length === 1 && $ctrl.match">
         <span class="oui-select-picker__value"
-                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)"
-                ng-if="$ctrl.values.length === 1"></span>
+                ng-bind=":: $ctrl.getFirstValueMatch($ctrl.match)">
+        </span>
+    </span>
+    <span class="oui-select-picker__value-container oui-select-picker__section"
+          ng-if="$ctrl.values.length > 1">
         <oui-select name="{{:: $ctrl.name }}"
                     disabled="$ctrl.disabled"
                     items="$ctrl.values"
@@ -39,9 +42,9 @@
                     model="$ctrl.selectedValue"
                     on-change="$ctrl.onSelectModelChange({ modelValue: $ctrl.selectedValue })"
                     placeholder="{{:: $ctrl.placeholder || ' - ' }}"
-                    data-align="end"
-                    ng-if="$ctrl.values.length > 1">
-            <span ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
+                    data-align="end">
+            <span ng-if="$ctrl.match" ng-bind=":: $ctrl.$scope.$parent.getItemValue($item, $ctrl.match)"></span>
+            <span ng-if="!$ctrl.match" ng-bind=":: $item"></span>
         </oui-select>
     </span>
     <span class="oui-select-picker__transclude-container"