refactor(ui5-multi-combobox): Replace validate-input with allow-custom-values (#749)

BREAKING CHANGE:

- validate-input property is removed
- allow-custom-values not replaces validate-input and built in validation is enabled by default

Author: MapTo0

packages/main/src/MultiComboBox.js

@@ -77,7 +77,7 @@ const metadata = {
 		 * @defaultvalue false
 		 * @public
 		 */
-		validateInput: {
+		allowCustomValues: {
 			type: Boolean,
 		},
 
@@ -256,7 +256,7 @@ class MultiComboBox extends UI5Element {
 		const filteredItems = this._filterItems(value);
 		const oldValueState = this.valueState;
 
-		if (!filteredItems.length && value && this.validateInput) {
+		if (!filteredItems.length && value && !this.allowCustomValues) {
 			input.value = this._inputLastValue;
 			input.valueState = "Error";
 

packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html

@@ -77,7 +77,7 @@
 		<span>Predefined value</span>
 
 		<br>
-		<ui5-multi-combobox id="multi1" style="width: 560px;" value="Hello World">
+		<ui5-multi-combobox allow-custom-values id="multi1" style="width: 560px;" value="Hello World">
 			<ui5-li style="display: none" selected type="Active">Cosy</ui5-li>
 			<ui5-li style="display: none" type="Active">Compact</ui5-li>
 			<ui5-li style="display: none" selected type="Active">Condensed</ui5-li>
@@ -88,7 +88,7 @@
 		<span>Validating input and predefined value</span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" value="com" validate-input>
+		<ui5-multi-combobox style="width: 560px" value="com">
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -99,7 +99,7 @@
 		<span>Validating input and placeholder </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" validate-input>
+		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text">
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -110,7 +110,7 @@
 		<span>disabled and placeholder </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" disabled>
+		<ui5-multi-combobox allow-custom-valuesstyle="width: 560px" placeholder="Some initial text" disabled>
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -121,7 +121,7 @@
 		<span>value state success </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" value-state="Success">
+		<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Success">
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -132,7 +132,7 @@
 		<span>value state warning </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" value-state="Warning">
+		<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Warning">
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -143,7 +143,7 @@
 		<span>value state error </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" value-state="Error">
+		<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Error">
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -154,7 +154,7 @@
 		<span>readonly </span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" readonly>
+		<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" readonly>
 			<ui5-li selected type="Active">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li selected type="Active">Condensed</ui5-li>
@@ -166,15 +166,15 @@
 		<span>MultiComboBox with items</span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" id="mcb">
+		<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" id="mcb">
 			<ui5-li type="Active" id="first-item">Cosy</ui5-li>
 			<ui5-li type="Active">Compact</ui5-li>
 			<ui5-li type="Active">Condensed</ui5-li>
 			<ui5-li type="Active">Longest word in the world</ui5-li>
 		</ui5-multi-combobox>
 	</div>
 
-	<div class="demo-section">
+	<div class="demo-section" allow-custom-values>
 			<span>MultiComboBox n more</span> </br>
 
 			<ui5-multi-combobox style="width: 320px" placeholder="Some initial text" id="more-mcb">
@@ -186,10 +186,10 @@
 		</div>
 
 		<div class="demo-section">
-				<span>MultiComboBox with validate-input</span>
+				<span>MultiComboBox with validation</span>
 
 				<br>
-				<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" id="mcb-validation" validate-input>
+				<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" id="mcb-validation">
 					<ui5-li type="Active">Cosy</ui5-li>
 					<ui5-li type="Active">Compact</ui5-li>
 					<ui5-li type="Active">Condensed</ui5-li>

packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html

@@ -114,9 +114,9 @@ <h3>MultiComboBox with items</h3>
 	</section>
 
 	<section>
-		<h3>MultiComboBox with items and build-in user input validation</h3>
+		<h3>MultiComboBox with free text input</h3>
 		<div class="snippet">
-			<ui5-multi-combobox style="width: 100%" validate-input placeholder="Choose your countries">
+			<ui5-multi-combobox style="width: 100%" placeholder="Choose your countries" allow-custom-values>
 				<ui5-li>Argentina</ui5-li>
 				<ui5-li selected>Bulgaria</ui5-li>
 				<ui5-li>Denmark</ui5-li>
@@ -131,7 +131,7 @@ <h3>MultiComboBox with items and build-in user input validation</h3>
 		</div>
 	<div class="snippet">
 <pre class="prettyprint lang-html"><xmp>
-<ui5-multi-combobox validate-input placeholder="Choose your countries">
+<ui5-multi-combobox placeholder="Choose your countries">
 	<ui5-li>Argentina</ui5-li>
 	<ui5-li selected>Bulgaria</ui5-li>
 	<ui5-li>Denmark</ui5-li>

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

@@ -77,7 +77,7 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(list.getProperty("items").length, 3, "1 items should be shown");
 		});
 
-		it("tests validate-input by typing a non existing option", () => {
+		it("tests built in validation by typing a non existing option", () => {
 			const mcb = $("#mcb-validation");
 			const input = browser.$("#mcb-validation").shadow$("#ui5-multi-combobox-input");
 			const innerInput = browser.$("#mcb-validation").shadow$("#ui5-multi-combobox-input").shadow$("input");