Add infinite scrolling to ResourceLabeledSelect

[richard-cox]

Is your feature request related to a problem? Please describe.

Remove load more fatigue by

• remove load more button
• make list scrollable
• trigger load more when user scrolls close to bottom of list

Additional context

• Conditionally Increase default page size of ResourceLabeledSelect page size #17840
• a good location to test with is local cluster --> install backup chart --> for Default Storage Location select use an s3-compatible object store and use the Credential Secret drop down

[github-actions]

🎯 Agentic Issue Triage

This is a feature request to improve the UX of ResourceLabeledSelect by replacing the explicit "Load More" button with infinite/virtual scrolling — automatically fetching the next page when the user scrolls near the bottom of the dropdown list.

📋 Summary & Context

• Component affected: shell/components/form/ResourceLabeledSelect.vue (a convenience wrapper around LabeledSelect.vue)
• Current behaviour: When pagination is active, a "Load More" button is rendered at the bottom of the dropdown list (see LabeledSelect.vue line ~541 and useLabeledSelectPagination.ts).
• Related issue: Conditionally Increase default page size of ResourceLabeledSelect page size #17840 — conditionally increase the default page size of ResourceLabeledSelect. Both issues target the same component and UX area and should likely be worked on together or in sequence.
• Good test location: Local cluster → Backup chart → Default Storage Location → use an s3-compatible object store → Credential Secret dropdown.

🔍 Relevant Code Locations

File	Purpose
shell/components/form/ResourceLabeledSelect.vue	Main component — wraps LabeledSelect, handles paginate mode detection and request dispatching
shell/components/form/LabeledSelect.vue	Renders the dropdown + current "Load More" button (~line 541)
shell/components/form/labeled-select-utils/useLabeledSelectPagination.ts	loadMore() composable — contains the pagination state machine
shell/types/components/resourceLabeledSelect.ts	Type definitions for settings/modes
shell/components/form/labeled-select-utils/labeled-select.utils.ts	labelSelectPaginationFunction — API call helper

🛠 Implementation Approach

Recommended approach — IntersectionObserver on a sentinel element:

1. In LabeledSelect.vue, replace (or supplement) the "Load More" <button> with a hidden sentinel <div ref="loadMoreSentinel"> at the bottom of the options list.
2. In the component's mounted/onMounted hook, create an IntersectionObserver that watches the sentinel element within the dropdown scroll container.
3. When the sentinel becomes visible (i.e., the user has scrolled to the bottom), call the existing loadMore() function from useLabeledSelectPagination.ts.
4. Disconnect the observer when there are no more pages, or when the dropdown closes.
5. Keep the existing loadMore() logic intact — only the trigger changes from a click to a scroll event.

Key considerations:

• The dropdown list is likely rendered inside a vue-select or custom scrollable container — the IntersectionObserver root should be set to that container element, not window.
• Guard against triggering multiple concurrent fetches (the existing loading state in the composable should handle this).
• Accessibility: ensure keyboard navigation still works after removing the explicit button.
• The "Load More" button could optionally be kept as a fallback for users who have scrolled-triggered loading disabled or for accessibility.

🧪 Testing & Reproduction Steps

1. Run Rancher locally with a cluster that has backup operator installed.
2. Navigate to Local cluster → Apps → Backup → Create.
3. Under Default Storage Location, select use an s3-compatible object store.
4. Click the Credential Secret dropdown.
5. If there are more than 10 secrets, verify the "Load More" button appears.
6. After the fix: scroll to the bottom of the list — the next page should load automatically without a button click.

Unit test file to update/create:

• shell/components/form/__tests__/LabeledSelect.test.ts
• shell/components/form/labeled-select-utils/__tests__/useLabeledSelectPagination.test.ts

✅ Suggested Sub-tasks

• Investigate the exact scroll container used by LabeledSelect to configure IntersectionObserver root correctly
• Add sentinel <div> to LabeledSelect.vue dropdown list footer
• Wire IntersectionObserver to call loadMore() on scroll-near-bottom
• Handle observer lifecycle (mount/unmount, dropdown open/close)
• Ensure no duplicate fetches when user scrolls rapidly
• Handle "no more pages" state (stop observing / hide sentinel)
• Update / add unit tests for the scroll-triggered pagination
• Manual QA using the Credential Secret dropdown test case
• Consider whether Conditionally Increase default page size of ResourceLabeledSelect page size #17840 (page size increase) should land first

📚 Useful Resources

• [MDN: Intersection Observer API]((developer.mozilla.org/redacted)
• [Vue 3 onMounted / onUnmounted]((vuejs.org/redacted) for observer lifecycle management
• Related issue Conditionally Increase default page size of ResourceLabeledSelect page size #17840 (page size increase for ResourceLabeledSelect)

Generated by Agentic Triage for issue #17841 · ● 501.1K · ◷