Skip to content

feat(@clayui/autocomplete): adds loading indicator and live announcer to infinite scrolling #6060

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

matuzalemsteles
Copy link
Member

Ticket LPD-55597

Well, this PR introduces improvements to the infinite scrolling mechanism used by the Autocomplete component, which also benefits the MultiSelect component. There are still a few minor adjustments needed, particularly around triggering the load more functionality via keyboard interaction—specifically, ensuring the scroll moves to the loading indicator, and after the new items are loaded, to the next item in the list.

One small caveat: the loading indicator is barely visible when the request completes very quickly. You can only consistently observe it when simulating a slower connection (e.g., 3G) in the browser—this applies to both mouse and keyboard interactions. This behavior also depends on how fast the API response is, and in the example cases, it’s a bit hard to notice.

This PR also includes improvements to the live announcer, which now behaves as a singleton and relies on a global state.

import {Announcer} from '@clayui/core';

Announcer.announce('message', 'assertive');

Looking ahead, one possible enhancement would be to move the keyboard-based load more trigger and the infinite scroll announcer logic to the Collection layer. However, I still need to identify a better pattern for that. Some of this logic could potentially go into useNavigation, but I’m not too keen on that approach, since it would make the hook responsible for handling network state awareness. A better alternative might be to create a new useCollectionAnnouncer hook that encapsulates this behavior and is easy to reuse across other components. I’ll investigate cleaner approaches in the future.

Also, a quick note: I added a deprecation warning to a few Storybook examples that still use the legacy Autocomplete implementation. These are only kept for backwards compatibility. This legacy usage caused some confusion in the ticket raised to address these problems, as the examples in question don’t reflect the current implementation of the Autocomplete component.

@pat270
Copy link
Member

pat270 commented May 19, 2025

I fired this pr up and I'm getting an error on Async Filter, Infinite Scroller, and Async Data.

error

@matuzalemsteles
Copy link
Member Author

@pat270 can you try running a yarn buildTypes at the root of the project and see if this error appears for you again?

@matuzalemsteles
Copy link
Member Author

It seems that there is an error in the size build generator in two PRs. I believe it is due to the new dependencies that use new operators, but the Parcel that is being used to generate the size is a very old version. We need to work on rewriting our size generator to be compatible with these new libs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants