feat(ui5-select): new events introduced

There are two new events 'open' and 'close' which are fired after
the dropdown's opening and closure respectively.

Implements SAP#5836

packages/main/src/Select.ts

@@ -132,6 +132,22 @@ interface IOption extends UI5Element {
 		selectedOption: { type: HTMLElement },
 	},
 })
+/**
+ * Fired after the component's dropdown menu opens.
+ *
+ * @event sap.ui.webc.main.Select#open
+ * @public
+ * @native
+ */
+@event("open")
+/**
+ * Fired after the component's dropdown menu closes.
+ *
+ * @event sap.ui.webc.main.Select#close
+ * @public
+ * @native
+ */
+@event("close")
 class Select extends UI5Element implements IFormElement {
 	static i18nBundle: I18nBundle;
 
@@ -669,6 +685,7 @@ class Select extends UI5Element implements IFormElement {
 
 	_afterOpen() {
 		this.opened = true;
+		this.fireEvent("open");
 	}
 
 	_afterClose() {
@@ -683,6 +700,7 @@ class Select extends UI5Element implements IFormElement {
 			this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
 			this._lastSelectedOption = this._filteredItems[this._selectedIndex];
 		}
+		this.fireEvent("close");
 	}
 
 	_fireChangeEvent(selectedOption: Option) {

packages/main/test/pages/Select.html

@@ -93,6 +93,12 @@ <h2>Selection not cycling</h2>
 	<h2> Change event counter holder</h2>
 	<ui5-input id="inputResult"></ui5-input>
 
+	<h2> Open event counter holder</h2>
+	<ui5-input id="inputResultOpen"></ui5-input>
+
+	<h2> Close event counter holder</h2>
+	<ui5-input id="inputResultClose"></ui5-input>
+
 	<section>
 		<h3>Select aria-label and aria-labelledby</h3>
 		<span id="infoText">info text</span>
@@ -150,11 +156,15 @@ <h2>Select with additional text</h2>
 	var restoreItemsBtn = document.getElementById('restore-items-btn');
 	var input = document.getElementById('myInput');
 	var inputResult = document.getElementById('inputResult');
+	var inputResultOpen = document.getElementById('inputResultOpen');
+	var inputResultClose = document.getElementById('inputResultClose');
 	var select = document.getElementById('mySelect');
 	var select2 = document.getElementById('errorSelect');
 	var select3 = document.getElementById('warningSelect');
 	var lbl = document.getElementById('lblResult');
 	var counter = 0;
+	var counterOpen = 0;
+	var counterClose = 0;
 
 	// Select
 	select.addEventListener("ui5-change", function(e) {
@@ -166,6 +176,16 @@ <h2>Select with additional text</h2>
 		console.log("Select change event fired", e);
 	});
 
+	select.addEventListener("ui5-open", function(e) {
+		++counterOpen;
+		inputResultOpen.value = counterOpen;
+	});
+
+	select.addEventListener("ui5-close", function(e) {
+		++counterClose;
+		inputResultClose.value = counterClose
+	});
+
 	select2.addEventListener("ui5-change", function(e) {
 		++counter;
 		inputResult.value = counter;

packages/main/test/specs/Select.spec.js

@@ -50,6 +50,29 @@ describe("Select general interaction", () => {
 		assert.strictEqual(await inputResult.getProperty("value"), "", "Event not fired when already selected item is selected");
 	});
 
+	it("fire open, when clicking on selected item", async () => {
+		await browser.url(`test/pages/Select.html`);
+
+		const select = await browser.$("#mySelect");
+		const inputResultOpen = await browser.$("#inputResultOpen");
+
+		await select.click(); // open
+
+		assert.strictEqual(await inputResultOpen.getValue(), "1", "Open event fired when the popover gets expanded/opened.");
+	});
+
+	it("fire close, when clicking on selected item", async () => {
+		await browser.url(`test/pages/Select.html`);
+
+		const select = await browser.$("#mySelect");
+		const inputResultClose = await browser.$("#inputResultClose");
+
+		await select.click(); // open
+		await select.click(); // close
+
+		assert.strictEqual(await inputResultClose.getValue(), "1", "Close event fired when the popover gets collapsed/closed.");
+	});
+
 	it("fires change on selection with keyboard handling", async () => {
 		await browser.url(`test/pages/Select.html`);