<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=591888) </details> <!--IssueSummary end--> ## Problem The `RefSelector` component (`app/assets/javascripts/ref/components/ref_selector.vue`) only loads the first 20 branches/tags with no way to load more. Users must already know to use the search box to find branches beyond the initial set, which is not discoverable. This affects every page using `RefSelector`: commits, new branch, new tag, pipeline run, default branch settings, and more. Identified during the review of !225054 ([video with timestamp](https://youtu.be/0nQIi-2VZUI?t=1406), [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/225054#note_3123060353)).  ## Proposal Add infinite scroll to `RefSelector`. The component already uses `GlCollapsibleListbox`, which natively supports `:infinite-scroll` and `@bottom-reached` props. The `x-total` header from the branches API is already stored as `totalCount` in the Vuex store, so the data to determine whether more pages exist is available. Several other dropdowns in the codebase already implement this pattern and can be used as reference: - Pipeline editor branch selector (`app/assets/javascripts/ci/pipeline_editor/components/shared/branch_selector.vue`) - Jira Connect branch dropdown (`app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue`) - Pipeline charts branch dropdown (`app/assets/javascripts/projects/pipelines/charts/components/branch_collapsible_listbox.vue`) - #387517 added infinite scroll to the "Invite a group" dropdown using the same pattern ## Implementation guidance 1. **`app/assets/javascripts/ref/stores/actions.js`** - Add `fetchMoreBranches` and `fetchMoreTags` actions that request the next page and append results 2. **`app/assets/javascripts/ref/stores/state.js`** - Track current page/offset for branches and tags 3. **`app/assets/javascripts/ref/components/ref_selector.vue`** - Wire up `:infinite-scroll` and `@bottom-reached` on `GlCollapsibleListbox`