ui5-input event when user has scrolled suggestions

[codefactor]

Is your feature request related to a problem? Please describe.
We have a requirement that when the user has scrolled near to the bottom of the suggestion list that we need to load in more suggestions from the server. This can be achieved today but only by breaking encapsulation.

Also - for keyboard only accessibility - the user needs to scroll down the search suggestions to see what is available - though he does see the text change, but I don't think that is enough.

Describe the solution you'd like
It would be good to have this as a public event directly from the <ui5-input> tag -- maybe something like this:

<ui5-input showSuggestions @suggestion-scroll={{suggestionScroll}}></ui5-input>

The suggestion scroll event could give a reference to the this.Suggestion._getScrollContainer() so that the caller can check the scroll position if it is near the bottom.

edit:
We also need a callback when the user presses escape key or focus out, some sort of event when the search should clear the previous "transitive search".

Describe alternatives you've considered
onAfterRendering get a handle on input.Suggestions._getScrollContainer() Promise and manually attach the scroll event listener.

Additional context
Add any other context or screenshots about the feature request here.

[ilhan007]

Hello Scott, you can bind for the keyup event and check if ESC is pressed

Regarding the additional requirements you have, did you try to use the keyup and focusout events:

myInput.addEventListener("keyup", function (event) {
  // check event.key
});

myInput.addEventListener("focusout", function (event) {
  // handle focusout
});

Best,
ilhan

[codefactor]

@ilhan007

Yes, but I ran into an issue. The focus out event triggers when the user clicks a suggestion, but I need to clear the “transitive search” only when they have “truly focus out” and this focus out event is not “real” because the input will focus back immediately and trigger the item selection event. Also the focus out event occurs before the suggestion item selection event so i can’t distinguish it from the real kind of focus out if the user had clicked somewhere else.

[ilhan007]

1. For the focusout handling we a fix, now it should be fired when the user clicks outside the input and the suggestions.

2. We added a new event suggestion-scroll, fired whenever the user scrolls via the mouse or the keyboard keys, and you have the scrollTop and the scrollContainer as part of the event details.

scrollInput.addEventListener("suggestion-scroll", function (event) {
	console.log("scroll", { scrollTop: event.detail.scrollTop, container: event.detail.scrollContainer });
});

[codefactor]

@ilhan007 ,

One missing thing - The use case is like this -- type a search and receive 10 items from the server, if your screen is big enough to fit more items we should go ahead and fetch 10 more items right away.

Right now I cannot get a reference to check unless the user scrolls, and the only time the user scrolls is if the window is small - so what ends up happening is the person with the big screen is not able to scroll down to see more items because there was never a scroll bar to begin with.

[ilhan007]

Hello @codefactor I see your point, just, could please open a new issue for that to track it easier.

Thanks,
ilhan

[codefactor]

@ilhan007 see #1902