Conditionally Increase default page size of ResourceLabeledSelect page size

[richard-cox]

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

• to reduce impact of clicking load more increase the page size from 10
• this should only be done though if there's space to show more than time

Additional context

• 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

[richard-cox]

Linking two issues

• ResourceLabeledSelect closes drop down on clicking load more #16451
• Conditionally Increase default page size of ResourceLabeledSelect page size #17840

[github-actions]

🎯 Agentic Issue Triage

Summary: Feature request to conditionally increase the default page size of ResourceLabeledSelect from 10 items, but only when there is sufficient vertical space to display more results. This is a UX improvement that reduces the need to click "Load more" and is linked to bug #16451 (dropdown closes on "Load more" click).

📋 Issue Analysis

• Type: Enhancement / UX improvement
• Component: shell/components/form/ResourceLabeledSelect.vue → shell/components/form/labeled-select-utils/useLabeledSelectPagination.ts
• Milestone: v2.16.0
• Related Issue: ResourceLabeledSelect closes drop down on clicking load more #16451 — ResourceLabeledSelect closes dropdown on clicking load more — this enhancement is intended to reduce the frequency of needing "Load more" at all, partially mitigating the impact of that bug.
• Test location: shell/components/form/__tests__/ResourceLabeledSelect.test.ts

🔍 Technical Details

The current page size is hardcoded to 10 in useLabeledSelectPagination.ts (line 56):

const pageSize = ref(10);

The core challenge is detecting available vertical space before setting the page size. Options to explore:

1. Measure available viewport height when the dropdown opens (e.g., via getBoundingClientRect on the select container) and compute how many items fit.
2. Expose a pageSize prop on LabeledSelect / ResourceLabeledSelect so callers can pass a custom value.
3. Calculate page size dynamically based on window.innerHeight, the dropdown's top offset, and a fixed row height — setting a sensible max (e.g., 20).
4. Make pageSize reactive and update it when the dropdown opens (similar to how virtual-scroll libraries handle window resize).

The relevant composable is useLabeledSelectPagination.ts — pageSize is a ref(10) that is passed into the paginate function call.

🧪 Reproduction / Test Scenario

1. Install the Backup Helm chart on the local cluster.
2. Navigate to the chart configuration and set Default Storage Location → use an s3-compatible object store.
3. Click the Credential Secret dropdown — this triggers ResourceLabeledSelect with pagination.
4. Observe that only 10 items appear before a "Load more" button is shown.
5. Verify the desired behaviour: more items should appear if the screen has space for them.

✅ Suggested Sub-tasks

• Decide the strategy for detecting available space (viewport height, fixed heuristic, or prop-based override).
• Update useLabeledSelectPagination.ts to make pageSize dynamic / configurable.
• Expose a pageSize prop (or auto-calculate) in LabeledSelect.vue and ResourceLabeledSelect.vue.
• Add / update unit tests in shell/components/form/__tests__/ResourceLabeledSelect.test.ts.
• Verify behaviour in the Backup chart credential secret dropdown (manual smoke test).
• Confirm that dropdown does not re-close when fetching a larger first page (relates to ResourceLabeledSelect closes drop down on clicking load more #16451).

🔗 Resources

• ResourceLabeledSelect.vue
• useLabeledSelectPagination.ts
• LabeledSelect.vue
• Related bug: ResourceLabeledSelect closes drop down on clicking load more #16451

Generated by Agentic Triage for issue #17840 · ● 289.9K · ◷