ui5-input has no way to check to load more items without scrolling

[codefactor]

Describe the bug
The controller is taking user input and loading results from server, and once the first page of data is loaded it must check the container is scrolled to the bottom so it can load more items in case there are more; however, this is only possible today on a suggestion-scroll event. What ends up happening is people with large screens are stuck with only the first page and people with small screens can scroll and more pages are added.

Expected behavior
There should be some way to publicly get a handle on the scroll container element in the shadow dom so after inserting some data the controller can check if the container has a scroll and whether or not the scroll is at the bottom or not.

Context

• UI5 Web Components version
• OS/Platform: {...}
• Browser (if relevant): {...}
• Other information: {...}

Affected components (if known) input

Log output / Any errors in the console

{...}

[ilhan007]

Hello Scott, how do you fine the following change: to provide an event, let's call it suggestions-scrollable-change, that is fired whenever the suggestions popover scrollable state changes.

• On initial opening if the entire content fits - nothing is fired as we assume that the popover is not scrollable by default
• If the content does not fit, e.g. the popover has scrollbar - the event is fired.
• And, whenever the state changes, from scrollable to not scrollable and vice versa - the event would be fired.

This should address the part "the controller can check if the container has a scroll".
For the second part "and whether or not the scroll is at the bottom or not." I think the suggestion-scroll event is sufficient.

You would know if the content is scrollable at all from the suggestions-scrollable-change event
You would know If the users scroll to the bottom from the suggestion-scroll event

BR,
ilhan

[codefactor]

How about instead a public function to check the scrollable status on demand? Any time it writes a new batch of items it can call this function to check on it. Using an event to track the change would require a state tracking outside the input to toggle when the change event fires and makes the implementation more complicated.

[ilhan007]

That was my first thought, but when you load new items the DOM is not updated immediately and if you call this method it would return wrong result. But if this is not a problem, we will provide just a method, it is easier for us as well.

[codefactor]

@ilhan007 ,

I see, it is no problem as long as there is a reliable way to wait for the correct time to check.

await RenderScheduler.renderDeferred(inputRef);

Would the above be sufficient?

[ilhan007]

I think it would be sufficient, let's try it this way then. We will provide that method.

[ilhan007]

Added a method, called isSuggestionsScrollable, that returns if the suggestions popup is currently scrollable or not.

• Note: the method is async.
• Note: call the method after the DOM is updated, otherwise you might get wrong result.

// ensure the DOM has been updated - this is one way to wait for it:
await RenderScheduler.whenFinished();

// check if the suggestions pop up is scrollable
const scrollable = await input.isSuggestionsScrollable();