feat(ui5-multi-input): fire value-help-trigger with F4, ALT/OPTION + ARROW_UP/DOWN (#2145)

Fire the value-help-trigger when F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.

FIXES #2143

BREAKING CHANGE value-help-icon-press is renamed to value-help-trigger

Author: ilhan007

packages/main/src/MultiInput.js

@@ -1,4 +1,5 @@
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isShow } from "@ui5/webcomponents-base/dist/Keys.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./generated/templates/MultiInputTemplate.lit.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -14,7 +15,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
 		 * Determines whether a value help icon will be should in the end of the input.
-		 * Pressing the icon will fire <code>value-help-icon-press</code> event.
+		 * Pressing the icon will fire <code>value-help-trigger</code> event.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -54,12 +55,13 @@ const metadata = {
 	},
 	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
-		 * Fired when value state icon is pressed.
+		 * Fired when the value help icon is pressed
+		 * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
 		 *
-		 * @event sap.ui.webcomponents.main.MultiInput#value-help-icon-press
+		 * @event sap.ui.webcomponents.main.MultiInput#value-help-trigger
 		 * @public
 		 */
-		"value-help-icon-press": {},
+		"value-help-trigger": {},
 
 		/**
 		 * Fired when a token is about to be deleted.
@@ -120,7 +122,7 @@ class MultiInput extends Input {
 
 	valueHelpPress(event) {
 		this.closePopover();
-		this.fireEvent("value-help-icon-press", {});
+		this.fireEvent("value-help-trigger", {});
 	}
 
 	showMorePress(event) {
@@ -159,6 +161,14 @@ class MultiInput extends Input {
 		this.expandedTokenizer = true;
 	}
 
+	_onkeydown(event) {
+		super._onkeydown(event);
+
+		if (isShow(event)) {
+			this.valueHelpPress();
+		}
+	}
+
 	_onfocusout(event) {
 		super._onfocusout(event);
 		const relatedTarget = event.relatedTarget;

packages/main/test/pages/MultiInput.html

@@ -179,6 +179,13 @@ <h1>Tokens + Suggestions</h1>
 		</ui5-dialog>
 	</div>
 
+	<div class="sample-container">
+		<h1>Test value-help-trigger with F4 and Alt + ArrowUp/Down</h1>
+
+		<ui5-multi-input id="multi-with-value-help-icon" show-value-help-icon>
+		</ui5-multi-input>
+		<ui5-input id="value-help-trigger-counter" placeholder="event count.."></ui5-input>
+	</div>
 
 	<script>
 
@@ -209,11 +216,11 @@ <h1>Tokens + Suggestions</h1>
 
 		/* ----------------- */
 
-		document.getElementById("vh").addEventListener("ui5-value-help-icon-press", function (event) {
+		document.getElementById("vh").addEventListener("ui5-value-help-trigger", function (event) {
 			alert("test");
 		});
 
-		document.getElementById("suggestion-token").addEventListener("ui5-value-help-icon-press", function (event) {
+		document.getElementById("suggestion-token").addEventListener("ui5-value-help-trigger", function (event) {
 			var list = document.getElementById("tokens-list");
 
 			list.innerHTML = "";
@@ -241,9 +248,15 @@ <h1>Tokens + Suggestions</h1>
 			event.target.value = "";
 		});
 
-		document.getElementById("basic-overflow-and-icon").addEventListener("value-help-icon-press", function (event) {
+		document.getElementById("basic-overflow-and-icon").addEventListener("ui5-value-help-trigger", function (event) {
 			document.getElementById("basic-event-listener").innerHTML = "value help icon press";
 		});
+
+		let valueHelpTriggerCounter = 0;
+		document.getElementById("multi-with-value-help-icon").addEventListener("ui5-value-help-trigger", function (event) {
+			document.getElementById("value-help-trigger-counter").value = ++valueHelpTriggerCounter;
+		});
+
 		document.getElementById("suggestion-token").addEventListener("ui5-token-delete", function (event) {
 			var mi = event.target;
 

packages/main/test/pages/MultiInput_Suggestions.html

@@ -114,7 +114,7 @@ <h1>Token Creation onChange (unique)</h1>
 
 		/* ----------------- */
 
-		document.getElementById("suggestion-token").addEventListener("ui5-value-help-icon-press", function (event) {
+		document.getElementById("suggestion-token").addEventListener("ui5-value-help-trigger", function (event) {
 			var list = document.getElementById("tokens-list");
 
 			list.innerHTML = "";

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

@@ -25,25 +25,47 @@ describe("MultiInput general interaction", () => {
 
 	it ("tests opening of tokenizer Popover", () => {
 		const tokenizer = $("#basic-overflow").shadow$("ui5-tokenizer");
-		const nMoreLable = tokenizer.shadow$(".ui5-tokenizer-more-text");
+		const nMoreLabel = tokenizer.shadow$(".ui5-tokenizer-more-text");
 
-		nMoreLable.click();
+		nMoreLabel.click();
 
 		const rpoClassName = getTokenizerPopoverId("basic-overflow");
 		const rpo = $(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
 
 		assert.ok(rpo.getProperty("opened"), "More Popover should be open");
 	});
 
-	it ("fires value help icon press", () => {
-		const lable = $("#basic-event-listener");
+	it ("fires value-help-trigger on icon press", () => {
+		const label = $("#basic-event-listener");
 		const icon = $("#basic-overflow-and-icon").shadow$("ui5-icon");
+		const EXPECTED_TEXT = "value help icon press"
 
-		assert.strictEqual(lable.getText(), "", "event is not fired");
+		assert.strictEqual(label.getText(), "", "event is not fired");
 
+		// act
 		icon.click();
 
-		assert.strictEqual(lable.getText(), "value help icon press", "value help press event is fired");		
+		// assert
+		assert.strictEqual(label.getText(), EXPECTED_TEXT, "value help press event is fired");
+		
+	});
+
+	it ("fires value-help-trigger with F4 and Alt/Option + ArrowUp/Down", () => {
+		const eventCounter = $("#value-help-trigger-counter");
+		const multiInputInner = $("#multi-with-value-help-icon").shadow$(".ui5-input-inner");
+
+		// act
+		multiInputInner.click();
+		browser.keys(["Alt", "ArrowUp", "NULL"]);
+
+		// assert
+		assert.strictEqual(eventCounter.getProperty("value"), "1", "value help press event is fired");
+
+		// act
+		browser.keys("F4");
+
+		// assert
+		assert.strictEqual(eventCounter.getProperty("value"), "2", "value help press event is fired");
 	});
 
 	it ("adds a token to multi input", () => {

yarn.lock

@@ -2003,7 +2003,7 @@ chrome-launcher@^0.13.1:
     mkdirp "^0.5.3"
     rimraf "^3.0.2"
 
-chromedriver@^84.0.1:
+chromedriver@latest:
   version "84.0.1"
   resolved "https://registry.npmjs.org/chromedriver/-/chromedriver-84.0.1.tgz#eaca7723f1a58c262a5c521b8596769af40b0d4f"
   integrity sha512-iJ6Y680yp58+KlAPS5YgYe3oePVFf8jY5k4YoczhXkT0p/mQZKfGNkGG/Xc0LjGWDQRTgZwXg66hOXoApIQecg==