feat(ui5-select): adds readonly property selectedOption (#718)

FIXES: #457

Author: MapTo0

lib/documentation/templates/api-properties-section.js

@@ -14,7 +14,7 @@ module.exports = {
 
         {{#each properties}}
           <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}} <br> <code>{{toKebabCase this.name}}</code></div>
+            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}} {{#if this.readonly}} (readonly) {{else}} <br> <code>{{toKebabCase this.name}}{{/if}} </code></div>
             <div class="cell api-table-content-cell">{{this.type}}</div>
             <div class="cell api-table-content-cell">{{this.defaultValue}}</div>
             <div class="cell api-table-content-cell api-table-content-cell-description">

packages/main/src/Select.js

@@ -203,6 +203,16 @@ class Select extends UI5Element {
 		return popover && popover.opened;
 	}
 
+	/**
+	 * Currently selected option
+	 * @readonly
+	 * @type { ui5-option }
+	 * @public
+	 */
+	get selectedOption() {
+		return this.options.find(option => option.selected);
+	}
+
 	_togglePopover() {
 		const popover = this.shadowRoot.querySelector("#ui5-select--popover");
 
@@ -262,7 +272,7 @@ class Select extends UI5Element {
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
 				nativeInput.disabled = element.disabled;
-				nativeInput.value = element.selectedOption.value;
+				nativeInput.value = element._currentlySelectedOption.value;
 			});
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -303,11 +313,11 @@ class Select extends UI5Element {
 	}
 
 	_applyFocusAfterOpen() {
-		if (!this.selectedOption) {
+		if (!this._currentlySelectedOption) {
 			return;
 		}
 
-		const li = this.shadowRoot.querySelector(`#${this.selectedOption._id}-li`);
+		const li = this.shadowRoot.querySelector(`#${this._currentlySelectedOption._id}-li`);
 
 		li.parentElement._itemNavigation.currentIndex = this._selectedIndex;
 		li && li.focus();
@@ -375,7 +385,7 @@ class Select extends UI5Element {
 		return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`);
 	}
 
-	get selectedOption() {
+	get _currentlySelectedOption() {
 		return this.options[this._selectedIndex];
 	}
 

packages/main/wdio.conf.js

@@ -52,10 +52,12 @@ exports.config = {
         // 5 instances get started at a time.
         maxInstances: process.env.TRAVIS ? 1 : 5,
         //
-			browserName: 'chrome',
-        chromeOptions: {
-            args: ['headless']
-        }
+        browserName: 'chrome',
+        'goog:chromeOptions': {
+            // to run chrome headless the following flags are required
+            // (see https://developers.google.com/web/updates/2017/04/headless-chrome)
+                args: ['--headless', '--disable-gpu'],
+            }
     }],
     //
     // port to find chromedriver