fix(oui-select-picker): prevent leaving blank space

If no match value is defined an empty section is created

Author: marie-j

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", () => {

packages/oui-select-picker/src/select-picker.html

@@ -28,20 +28,23 @@
             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"
                     match="{{ $ctrl.match }}"
                     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"