Skip to content

Commit 1d20ba8

Browse files
ilhan007ilhan007
authored
feat(ui5-input): add suggestion-scroll event (#1856)
Add new event "suggestion-scroll", fired whenever the user scrolls the suggestion list in the popover either via the mouse, or via the keyboard keys. Fixes: #1846
1 parent a33dd95 commit 1d20ba8

File tree

6 files changed

+121
-1
lines changed

6 files changed

+121
-1
lines changed

‎packages/main/src/Input.js

+25
Original file line numberDiff line numberDiff line change
@@ -368,13 +368,30 @@ const metadata = {
368368
* @param {HTMLElement} item The previewed suggestion item
369369
* @param {HTMLElement} targetRef The DOM ref of the suggestion item.
370370
* @public
371+
* @since 1.0.0-rc.8
371372
*/
372373
"suggestion-item-preview": {
373374
detail: {
374375
item: { type: HTMLElement },
375376
targetRef: { type: HTMLElement },
376377
},
377378
},
379+
380+
/**
381+
* Fired when the user scrolls the suggestion popover.
382+
*
383+
* @event sap.ui.webcomponents.main.Input#suggestion-scroll
384+
* @param {Integer} scrollTop The current scroll position
385+
* @param {HTMLElement} scrollContainer The scroll container
386+
* @public
387+
* @since 1.0.0-rc.8
388+
*/
389+
"suggestion-scroll": {
390+
detail: {
391+
scrollTop: { type: Integer },
392+
scrollContainer: { type: HTMLElement },
393+
},
394+
},
378395
},
379396
};
380397

@@ -612,6 +629,14 @@ class Input extends UI5Element {
612629
this.fireEvent(this.EVENT_CHANGE);
613630
}
614631

632+
_scroll(event) {
633+
const detail = event.detail;
634+
this.fireEvent("suggestion-scroll", {
635+
scrollTop: detail.scrollTop,
636+
scrollContainer: detail.targetRef,
637+
});
638+
}
639+
615640
async _handleInput(event) {
616641
await this.getInputDOMRef();
617642
if (event.target === this.inputDomRef) {

‎packages/main/src/InputPopover.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
horizontal-align="Left"
77
@ui5-after-open="{{_afterOpenPopover}}"
88
@ui5-after-close="{{_afterClosePopover}}"
9+
@scroll="{{_scroll}}"
910
>
1011
{{#if _isPhone}}
1112
<div slot="header" class="ui5-responsive-popover-header">

‎packages/main/src/Popup.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
{{> beforeContent}}
66

7-
<div style="{{styles.content}}" class="{{classes.content}}">
7+
<div style="{{styles.content}}" class="{{classes.content}}" @scroll="{{_scroll}}">
88
<slot></slot>
99
</div>
1010

‎packages/main/src/Popup.js

+7
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,13 @@ class Popup extends UI5Element {
197197
document.body.style.top = "";
198198
}
199199

200+
_scroll(e) {
201+
this.fireEvent("scroll", {
202+
scrollTop: e.target.scrollTop,
203+
targetRef: e.target,
204+
});
205+
}
206+
200207
/**
201208
* Focus trapping
202209
* @private

‎packages/main/test/pages/Input.html

+66
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,63 @@ <h3> Input with multiple icons</h3>
232232
<ui5-icon slot="icon" name="decline" style="padding-left: 8px; padding-right: 8px"></ui5-icon>
233233
</ui5-input>
234234

235+
<h3> Test scroll pos</h3>
236+
<ui5-input id="scrollInput" show-suggestions>
237+
<ui5-li>Cozy</ui5-li>
238+
<ui5-li>Compact</ui5-li>
239+
<ui5-li>Condensed</ui5-li>
240+
<ui5-li>Cozy</ui5-li>
241+
<ui5-li>Compact</ui5-li>
242+
<ui5-li>Condensed</ui5-li>
243+
<ui5-li>Cozy</ui5-li>
244+
<ui5-li>Compact</ui5-li>
245+
<ui5-li>Condensed</ui5-li>
246+
<ui5-li>Cozy</ui5-li>
247+
<ui5-li>Compact</ui5-li>
248+
<ui5-li>Condensed</ui5-li>
249+
<ui5-li>Cozy</ui5-li>
250+
<ui5-li>Compact</ui5-li>
251+
<ui5-li>Condensed</ui5-li>
252+
<ui5-li>Cozy</ui5-li>
253+
<ui5-li>Compact</ui5-li>
254+
<ui5-li>Condensed</ui5-li>
255+
<ui5-li>Cozy</ui5-li>
256+
<ui5-li>Compact</ui5-li>
257+
<ui5-li>Condensed</ui5-li>
258+
<ui5-li>Cozy</ui5-li>
259+
<ui5-li>Compact</ui5-li>
260+
<ui5-li>Condensed</ui5-li>
261+
<ui5-li>Cozy</ui5-li>
262+
<ui5-li>Compact</ui5-li>
263+
<ui5-li>Condensed</ui5-li>
264+
<ui5-li>Cozy</ui5-li>
265+
<ui5-li>Compact</ui5-li>
266+
<ui5-li>Condensed</ui5-li>
267+
<ui5-li>Cozy</ui5-li>
268+
<ui5-li>Compact</ui5-li>
269+
<ui5-li>Condensed</ui5-li>
270+
<ui5-li>Cozy</ui5-li>
271+
<ui5-li>Compact</ui5-li>
272+
<ui5-li>Condensed</ui5-li>
273+
<ui5-li>Cozy</ui5-li>
274+
<ui5-li>Compact</ui5-li>
275+
<ui5-li>Condensed</ui5-li>
276+
<ui5-li>Cozy</ui5-li>
277+
<ui5-li>Compact</ui5-li>
278+
<ui5-li>Condensed</ui5-li>
279+
<ui5-li>Cozy</ui5-li>
280+
<ui5-li>Compact</ui5-li>
281+
<ui5-li>Condensed</ui5-li>
282+
<ui5-li>Cozy</ui5-li>
283+
<ui5-li>Compact</ui5-li>
284+
<ui5-li>Condensed</ui5-li>
285+
<ui5-li>Cozy</ui5-li>
286+
<ui5-li>Compact</ui5-li>
287+
<ui5-li>Condensed</ui5-li>
288+
</ui5-input>
289+
<br><br>
290+
<ui5-input id="scrollResult"></ui5-input>
291+
235292
<script>
236293
var sap_database_entries = [{ key: "A", text: "A" }, { key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "B", text: "B" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "C", text: "C" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "L", text: "L" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "P", text: "P" }, { key: "Prt", text: "Portugal" }, { key: "S", text: "S" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Sey", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];
237294

@@ -367,9 +424,18 @@ <h3> Input with multiple icons</h3>
367424
});
368425
});
369426

427+
inputPreview.addEventListener("ui5-suggestion-scroll", function (event) {
428+
console.log("scroll", { scrolltop: event.detail.scrollTop });
429+
});
430+
370431
inputPreview.addEventListener("focusout", function (event) {
371432
console.log("focusout");
372433
});
434+
435+
scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
436+
scrollResult.value = event.detail.scrollTop;
437+
console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });
438+
});
373439
</script>
374440
</body>
375441
</html>

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

+21
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,27 @@ describe("Input general interaction", () => {
139139
assert.strictEqual(inputItemPreviewRes.getValue(), "Cozy", "First item has been previewed");
140140
});
141141

142+
it("fires suggestion-scroll event", () => {
143+
const input = $("#scrollInput").shadow$("input");
144+
const scrollResult = $("#scrollResult");
145+
146+
// act
147+
// open suggestions
148+
input.click();
149+
input.keys("a");
150+
151+
// scroll with keyboard
152+
input.keys("ArrowUp");
153+
input.keys("ArrowUp");
154+
input.keys("ArrowUp");
155+
156+
// assert
157+
const scrollTop = scrollResult.getProperty("value");
158+
assert.ok(scrollTop > 0, "The suggestion-scroll event fired");
159+
160+
input.keys("Enter"); // close suggestions
161+
});
162+
142163
it("handles suggestions", () => {
143164
browser.url("http://localhost:8080/test-resources/pages/Input.html");
144165

0 commit comments

Comments
 (0)