Skip to content

Commit 1b3e40d

Browse files
fifoosidfifoosid
authored
fix(ui5-multi-combobox): close popover & empty value on selection (#832)
1 parent c1c1f26 commit 1b3e40d

File tree

6 files changed

+107
-42
lines changed

6 files changed

+107
-42
lines changed

‎packages/main/src/List.js

+2
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ class List extends UI5Element {
298298
selectedItems: this.getSelectedItems(),
299299
previouslySelectedItems,
300300
selectionComponentPressed: event.detail.selectionComponentPressed,
301+
key: event.detail.key,
301302
});
302303
}
303304
}
@@ -455,6 +456,7 @@ class List extends UI5Element {
455456
item: pressedItem,
456457
selectionComponentPressed: false,
457458
selected: !pressedItem.selected,
459+
key: event.detail.key,
458460
},
459461
});
460462
}

‎packages/main/src/ListItem.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ class ListItem extends ListItemBase {
143143
}
144144

145145
if (isEnter(event)) {
146-
this.fireItemPress();
146+
this.fireItemPress(event);
147147
}
148148
}
149149

@@ -153,7 +153,7 @@ class ListItem extends ListItemBase {
153153
}
154154

155155
if (isSpace(event)) {
156-
this.fireItemPress();
156+
this.fireItemPress(event);
157157
}
158158
}
159159

@@ -179,7 +179,7 @@ class ListItem extends ListItemBase {
179179
if (event.isMarked === "button") {
180180
return;
181181
}
182-
this.fireItemPress();
182+
this.fireItemPress(event);
183183
}
184184

185185
/*
@@ -204,8 +204,8 @@ class ListItem extends ListItemBase {
204204
this.fireEvent("_selectionRequested", { item: this, selectionComponentPressed: false });
205205
}
206206

207-
fireItemPress() {
208-
this.fireEvent("_press", { item: this, selected: this.selected });
207+
fireItemPress(event) {
208+
this.fireEvent("_press", { item: this, selected: this.selected, key: event.key });
209209
}
210210

211211
get placeSelectionElementBefore() {

‎packages/main/src/MultiComboBox.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</ui5-tokenizer>
2020

2121
<input id="ui5-multi-combobox-input"
22-
value="{{value}}"
22+
.value="{{value}}"
2323
inner-input
2424
placeholder="{{placeholder}}"
2525
?disabled={{disabled}}

‎packages/main/src/MultiComboBox.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
4-
import { isShow, isDown, isBackSpace } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
4+
import {
5+
isShow, isDown, isBackSpace, isSpace,
6+
} from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
57
import "./icons/slim-arrow-down.js";
68
import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
79
import { isIE } from "@ui5/webcomponents-core/dist/sap/ui/Device.js";
@@ -402,6 +404,12 @@ class MultiComboBox extends UI5Element {
402404
});
403405

404406
this.fireEvent("selectionChange", { items: this._getSelectedItems() });
407+
408+
if (!event.detail.selectionComponentPressed && !isSpace(event.detail)) {
409+
this._getPopover().close();
410+
this.value = "";
411+
this.fireEvent("input");
412+
}
405413
}
406414

407415
_getPopover(isMorePopover) {

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

+47-26
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
<ui5-li style="display: none" selected type="Active">Longest word in the world</ui5-li>
8585
</ui5-multi-combobox>
8686
</div>
87+
8788
<div class="demo-section">
8889
<span>Validating input and predefined value</span>
8990

@@ -95,6 +96,7 @@
9596
<ui5-li selected type="Active">Longest word in the world</ui5-li>
9697
</ui5-multi-combobox>
9798
</div>
99+
98100
<div class="demo-section">
99101
<span>Validating input and placeholder </span>
100102

@@ -106,6 +108,7 @@
106108
<ui5-li selected type="Active">Longest word in the world</ui5-li>
107109
</ui5-multi-combobox>
108110
</div>
111+
109112
<div class="demo-section">
110113
<span>disabled and placeholder </span>
111114

@@ -117,39 +120,46 @@
117120
<ui5-li selected type="Active">Longest word in the world</ui5-li>
118121
</ui5-multi-combobox>
119122
</div>
123+
120124
<div class="demo-section">
121125
<span>value state success </span>
122126

123127
<br>
124-
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Success">
128+
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text"
129+
value-state="Success">
125130
<ui5-li selected type="Active">Cosy</ui5-li>
126131
<ui5-li type="Active">Compact</ui5-li>
127132
<ui5-li selected type="Active">Condensed</ui5-li>
128133
<ui5-li selected type="Active">Longest word in the world</ui5-li>
129134
</ui5-multi-combobox>
130135
</div>
136+
131137
<div class="demo-section">
132138
<span>value state warning </span>
133139

134140
<br>
135-
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Warning">
141+
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text"
142+
value-state="Warning">
136143
<ui5-li selected type="Active">Cosy</ui5-li>
137144
<ui5-li type="Active">Compact</ui5-li>
138145
<ui5-li selected type="Active">Condensed</ui5-li>
139146
<ui5-li selected type="Active">Longest word in the world</ui5-li>
140147
</ui5-multi-combobox>
141148
</div>
149+
142150
<div class="demo-section">
143151
<span>value state error </span>
144152

145153
<br>
146-
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" value-state="Error">
154+
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text"
155+
value-state="Error">
147156
<ui5-li selected type="Active">Cosy</ui5-li>
148157
<ui5-li type="Active">Compact</ui5-li>
149158
<ui5-li selected type="Active">Condensed</ui5-li>
150159
<ui5-li selected type="Active">Longest word in the world</ui5-li>
151160
</ui5-multi-combobox>
152161
</div>
162+
153163
<div class="demo-section">
154164
<span>readonly </span>
155165

@@ -175,27 +185,39 @@
175185
</div>
176186

177187
<div class="demo-section">
178-
<span>MultiComboBox n more</span> </br>
188+
<span>MultiComboBox with validation</span>
179189

180-
<ui5-multi-combobox style="width: 320px" placeholder="Some initial text" id="more-mcb">
181-
<ui5-li type="Active" selected>Cosy</ui5-li>
182-
<ui5-li type="Active" selected>Compact</ui5-li>
183-
<ui5-li type="Active">Condensed</ui5-li>
184-
<ui5-li type="Active" selected>Longest word in the world</ui5-li>
185-
</ui5-multi-combobox>
186-
</div>
190+
<br>
191+
<ui5-multi-combobox allow-custom-values style="width: 560px" placeholder="Some initial text" id="another-mcb">
192+
<ui5-li type="Active">Cosy</ui5-li>
193+
<ui5-li type="Active">Compact</ui5-li>
194+
<ui5-li type="Active">Condensed</ui5-li>
195+
<ui5-li type="Active">Longest word in the world</ui5-li>
196+
</ui5-multi-combobox>
197+
</div>
187198

188-
<div class="demo-section">
189-
<span>MultiComboBox with validation</span>
199+
<div class="demo-section">
200+
<span>MultiComboBox n more</span> </br>
190201

191-
<br>
192-
<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" id="mcb-validation">
193-
<ui5-li type="Active">Cosy</ui5-li>
194-
<ui5-li type="Active">Compact</ui5-li>
195-
<ui5-li type="Active">Condensed</ui5-li>
196-
<ui5-li type="Active">Longest word in the world</ui5-li>
197-
</ui5-multi-combobox>
198-
</div>
202+
<ui5-multi-combobox style="width: 320px" placeholder="Some initial text" id="more-mcb">
203+
<ui5-li type="Active" selected>Cosy</ui5-li>
204+
<ui5-li type="Active" selected>Compact</ui5-li>
205+
<ui5-li type="Active">Condensed</ui5-li>
206+
<ui5-li type="Active" selected>Longest word in the world</ui5-li>
207+
</ui5-multi-combobox>
208+
</div>
209+
210+
<div class="demo-section">
211+
<span>MultiComboBox with validation</span>
212+
213+
<br>
214+
<ui5-multi-combobox style="width: 560px" placeholder="Some initial text" id="mcb-validation">
215+
<ui5-li type="Active">Cosy</ui5-li>
216+
<ui5-li type="Active">Compact</ui5-li>
217+
<ui5-li type="Active">Condensed</ui5-li>
218+
<ui5-li type="Active">Longest word in the world</ui5-li>
219+
</ui5-multi-combobox>
220+
</div>
199221

200222

201223
<hr class="demo-section">
@@ -214,7 +236,7 @@
214236
<br>
215237

216238
<span>Event call count: </span>
217-
<input type="text" id="events-call-count" value="0"/>
239+
<input type="text" id="events-call-count" value="0" />
218240

219241
<br>
220242
<br>
@@ -224,19 +246,18 @@
224246

225247

226248
<script>
227-
228249
const eventNameInput = document.getElementById("events-input");
229250
const eventParamsInput = document.getElementById("events-parameters");
230251
const callCountInput = document.getElementById("events-call-count");
231252
const resetBtn = document.getElementById("reset-btn");
232253

233-
document.getElementById("mcb").addEventListener("ui5-selectionChange", function(event) {
254+
document.getElementById("mcb").addEventListener("ui5-selectionChange", function (event) {
234255
eventNameInput.value = "selectionChange";
235256
eventParamsInput.value = event.detail.items.length;
236257
callCountInput.value = parseInt(callCountInput.value) + 1;
237258
});
238259

239-
resetBtn.addEventListener("click", function(event) {
260+
resetBtn.addEventListener("click", function (event) {
240261
eventNameInput.value = "";
241262
eventParamsInput.value = "";
242263
callCountInput.value = "";
@@ -245,4 +266,4 @@
245266

246267
</body>
247268

248-
</html>
269+
</html>

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

+43-9
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ describe("MultiComboBox general interaction", () => {
99
const popover = browser.$("#multi1").shadow$(".ui5-multi-combobox-all-items-popover");
1010

1111
icon.click();
12-
assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport");
12+
assert.ok(popover.getProperty("opened"), "Popover should be displayed in the viewport");
1313

1414
icon.click();
15-
assert.ok(!popover.isDisplayedInViewport(), "Popover should close");
15+
assert.ok(!popover.getProperty("opened"), "Popover should close");
1616
});
1717
});
1818

@@ -30,7 +30,7 @@ describe("MultiComboBox general interaction", () => {
3030

3131
icon.click();
3232

33-
assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport");
33+
assert.ok(popover.getProperty("opened"), "Popover should be displayed in the viewport");
3434
assert.equal(firstItem.getAttribute("selected"), null, "First item should not be selected");
3535

3636
firstItemCheckbox.click();
@@ -59,7 +59,7 @@ describe("MultiComboBox general interaction", () => {
5959

6060
const list = browser.$("#mcb").shadow$(".ui5-multi-combobox-all-items-list");
6161

62-
assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport");
62+
assert.ok(popover.getProperty("opened"), "Popover should be displayed in the viewport");
6363

6464

6565
assert.strictEqual(list.getProperty("items").length, 3, "3 items should be shown");
@@ -97,13 +97,47 @@ describe("MultiComboBox general interaction", () => {
9797
}, 2500, "expect value state to be different after 2.5 seconds");
9898
});
9999

100-
// it("tests if n more is applied and corresponding popover", () => {
101-
// $("#more-mcb").scrollIntoView();
100+
it("When item is clicked, the popover should be closed and the value in the input should be removed", () => {
101+
const input = browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
102+
const popover = browser.$("#another-mcb").shadow$(".ui5-multi-combobox-all-items-popover");
103+
const firstItem = browser.$("#another-mcb").shadow$(".ui5-multi-combobox-all-items-list > ui5-li");
102104

103-
// const nMoreText = browser.$("#more-mcb").shadow$("ui5-tokenizer").shadow$(".ui5-tokenizer-more-text");
105+
input.click();
106+
input.keys("c");
107+
108+
assert.strictEqual(popover.getProperty("opened"), true, "The popover should be opened");
109+
assert.strictEqual(input.getValue(), "c", "Value is c (as typed)");
110+
111+
firstItem.click();
112+
113+
assert.strictEqual(popover.getProperty("opened"), false, "When the content is clicked, the popover should close");
114+
assert.strictEqual(input.getValue(), "", "When the content is clicked, the value should be removed");
115+
});
116+
117+
it("When item's checkbox is clicked, the popover should not be closed and the value in the input should be kept", () => {
118+
const input = browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
119+
const popover = browser.$("#another-mcb").shadow$(".ui5-multi-combobox-all-items-popover");
120+
const firstItemCheckbox = browser.$("#another-mcb").shadow$(".ui5-multi-combobox-all-items-list > ui5-li").shadow$("ui5-checkbox");
121+
122+
input.click();
123+
input.keys("c");
124+
125+
assert.strictEqual(popover.getProperty("opened"), true, "The popover should be opened");
126+
assert.strictEqual(input.getValue(), "c", "Value is c (as typed)");
104127

105-
// assert.ok(nMoreText.getText(), "1 More", "token 1 should be visible");
106-
// });
128+
firstItemCheckbox.click();
129+
130+
assert.strictEqual(popover.getProperty("opened"), true, "When the content is clicked, the popover should close");
131+
assert.strictEqual(input.getValue(), "c", "When the content is clicked, the value should be removed");
132+
});
133+
134+
it("tests if n more is applied and corresponding popover", () => {
135+
$("#more-mcb").scrollIntoView();
136+
137+
const nMoreText = browser.$("#more-mcb").shadow$("ui5-tokenizer").shadow$(".ui5-tokenizer-more-text");
138+
139+
assert.ok(nMoreText.getText(), "1 More", "token 1 should be visible");
140+
});
107141
});
108142

109143
describe("keyboard handling", () => {

0 commit comments

Comments
 (0)