Built-in Support for Infinite Scrolling on SuggestionItems with <ui5-input> #6507

Feature Request Description

We have many use cases where an <Input> with Suggestions will lazily fetch the items via lazy fetch one page of data at a time, with infinite scrolling to scroll through large lists when appropriate. We have multiple variations on this concept, so I propose that we officially support this in the base Web Component and give a very simple declarative solution to visualize the following states: 1) User has typed text but there are no search results available yet, 2) User has typed text with at least one page of data available, but there are more results available that are not available yet.

Proposed Solution

A declarative solution might involve:

1. Add a new boolean flag called has-pending-suggestions
2. Add a new optional attribute called items-count (or similar) so that if the consumer knows the total count this can be passed (for accessibility reasons).
3. Add a new event called request-more-suggestions - fired whenever the suggestion scroll has moved close to the bottom
4. Update the UI to handle when the has-pending-suggestions flag is true, and there are zero items - the input may need to show some indication (though no popover is visible yet)
5. Update the UI to handle when has-pending-suggestions is true, and the popover is visible with more than zero items - the list could show a busy indicator at the bottom with some additional white space left over for the user to scroll.

Item 3 might need some additional inputs from central UX team(s) if this is not already specified clearly in the Fiori design guidelines. But if that's not already well-defined, then that seems like a big gap to me.

NOTE: Some implementations will know how many total items there are, but most implementations will NOT know this information, and instead will wait for either an empty response from the next page request or a "hasMore" flag as false from server response.

Sample Usage Code

<ui5-input id="input" has-pending-suggestions />
<script>
// Not a complete implementation just a demo of what it might look like from consumer side

const input = document.getElementById("input");
const skip = 0;

function appendItems(items) {
  skip += items.length;
  items.forEach(text => {
    var item = document.createElement("ui5-suggestion-item");
    item.setAttribute("text", text);
    input.appendChild(item);
  });
}

async fetchMore() {
  const resp = await fetch(`/items?${encodeURIComponent(input.value)}&skip=${skip}`);
  if (resp.ok) {
    const {items, hasMore} = await resp.json();
    appendItems(items);
    if (hasMore) {
      input.setAttribute("has-more-suggestions", "has-more-suggestions");
    } else {
      input.removeAttribute("has-more-suggestions");
    }
  }
}

input.addEventListener("input", () => fetchMore());
input.addEventListener("request-more-suggestions", () => fetchMore());

Proposed Alternatives

We can build our own custom Input extension component; however, we already see multiple copies of this springing up with different ways to represent these states. It would be great if we could harmonize those approaches and support this functionality with a public and declarative solution.

Additional Context

Add other context or screenshots related to the feature request here.

Priority

• Low
• Medium
• High
• Very High

A clear and concise description of the impact/urgency of the required feature.

Stakeholder Info (if applicable)

• Organization: SuccessFactors
• Business impact: {...}