Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 28, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/main/src/MultiComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const metadata = {
* @defaultvalue false
* @public
*/
validateInput: {
allowCustomValues: {
type: Boolean,
},

Expand Down Expand Up @@ -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";

Expand Down
24 changes: 12 additions & 12 deletions packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/main/test/sap/ui/webcomponents/main/samples/MultiComboBox.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/main/test/specs/MultiComboBox.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down