Skip to content

Commit

Permalink
feat(ui5-input): add suggestion-scroll event (#1856)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@ilhan007
ilhan007 committed Jun 23, 2020
1 parent a33dd95 commit 1d20ba8
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 1 deletion.
25 changes: 25 additions & 0 deletions packages/main/src/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -368,13 +368,30 @@ const metadata = {
* @param {HTMLElement} item The previewed suggestion item
* @param {HTMLElement} targetRef The DOM ref of the suggestion item.
* @public
* @since 1.0.0-rc.8
*/
"suggestion-item-preview": {
detail: {
item: { type: HTMLElement },
targetRef: { type: HTMLElement },
},
},

/**
* Fired when the user scrolls the suggestion popover.
*
* @event sap.ui.webcomponents.main.Input#suggestion-scroll
* @param {Integer} scrollTop The current scroll position
* @param {HTMLElement} scrollContainer The scroll container
* @public
* @since 1.0.0-rc.8
*/
"suggestion-scroll": {
detail: {
scrollTop: { type: Integer },
scrollContainer: { type: HTMLElement },
},
},
},
};

Expand Down Expand Up @@ -612,6 +629,14 @@ class Input extends UI5Element {
this.fireEvent(this.EVENT_CHANGE);
}

_scroll(event) {
const detail = event.detail;
this.fireEvent("suggestion-scroll", {
scrollTop: detail.scrollTop,
scrollContainer: detail.targetRef,
});
}

async _handleInput(event) {
await this.getInputDOMRef();
if (event.target === this.inputDomRef) {
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/InputPopover.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
horizontal-align="Left"
@ui5-after-open="{{_afterOpenPopover}}"
@ui5-after-close="{{_afterClosePopover}}"
@scroll="{{_scroll}}"
>
{{#if _isPhone}}
<div slot="header" class="ui5-responsive-popover-header">
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/Popup.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

{{> beforeContent}}

<div style="{{styles.content}}" class="{{classes.content}}">
<div style="{{styles.content}}" class="{{classes.content}}" @scroll="{{_scroll}}">
<slot></slot>
</div>

Expand Down
7 changes: 7 additions & 0 deletions packages/main/src/Popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,13 @@ class Popup extends UI5Element {
document.body.style.top = "";
}

_scroll(e) {
this.fireEvent("scroll", {
scrollTop: e.target.scrollTop,
targetRef: e.target,
});
}

/**
* Focus trapping
* @private
Expand Down
66 changes: 66 additions & 0 deletions packages/main/test/pages/Input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,63 @@ <h3> Input with multiple icons</h3>
<ui5-icon slot="icon" name="decline" style="padding-left: 8px; padding-right: 8px"></ui5-icon>
</ui5-input>

<h3> Test scroll pos</h3>
<ui5-input id="scrollInput" show-suggestions>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
<ui5-li>Cozy</ui5-li>
<ui5-li>Compact</ui5-li>
<ui5-li>Condensed</ui5-li>
</ui5-input>
<br><br>
<ui5-input id="scrollResult"></ui5-input>

<script>
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" }];

Expand Down Expand Up @@ -367,9 +424,18 @@ <h3> Input with multiple icons</h3>
});
});

inputPreview.addEventListener("ui5-suggestion-scroll", function (event) {
console.log("scroll", { scrolltop: event.detail.scrollTop });
});

inputPreview.addEventListener("focusout", function (event) {
console.log("focusout");
});

scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
scrollResult.value = event.detail.scrollTop;
console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });
});
</script>
</body>
</html>
21 changes: 21 additions & 0 deletions packages/main/test/specs/Input.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,27 @@ describe("Input general interaction", () => {
assert.strictEqual(inputItemPreviewRes.getValue(), "Cozy", "First item has been previewed");
});

it("fires suggestion-scroll event", () => {
const input = $("#scrollInput").shadow$("input");
const scrollResult = $("#scrollResult");

// act
// open suggestions
input.click();
input.keys("a");

// scroll with keyboard
input.keys("ArrowUp");
input.keys("ArrowUp");
input.keys("ArrowUp");

// assert
const scrollTop = scrollResult.getProperty("value");
assert.ok(scrollTop > 0, "The suggestion-scroll event fired");

input.keys("Enter"); // close suggestions
});

it("handles suggestions", () => {
browser.url("http://localhost:8080/test-resources/pages/Input.html");

Expand Down

0 comments on commit 1d20ba8

Please sign in to comment.