[rijulpoudel]

Fixes #8691

What changed

Removed the virtualizer from AutoComplete.tsx and render the query combobox rows directly.

Headless UI keeps the active option as an index among the mounted options only. When the virtualizer unmounted rows while scrolling, that index pointed to a different row, so Headless UI called scrollIntoView on the wrong row and the list jumped back. Firefox shows it on every scroll step. Chromium hides it in normal wheel scrolling, but the same jump happens if the list is scrolled programmatically.

Page size is 50 results per request, so mounting all rows is cheap (the old code rendered up to 1000). Pagination on scroll and the popup positioning fix from #8016 stay unchanged.

Before (also look at #8691 for video)

Program scrolling in dev tools:

After

Checklist

• Self-review the PR after opening it to make sure the changes look good and
  self-explanatory (or properly documented)
• Add relevant issue to release milestone
• Add pr to documentation list
• Add automated tests
• Add a reverse migration if a migration is present in the PR
• Add migration function to

  specify7/specifyweb/specify/management/commands/run_key_migration_functions.py

  Line 50 in ea04665

  def fix_schema_config(stdout: WriteToStdOut | None = None):

Testing instructions

Firefox: scrolling in query combobox results

• Open a form that has a query combobox (for example Accession on a Collection Object, or Taxon on a Determination).
• Type a so the list has many results.
• Keep the pointer over the results and scroll down with the mouse wheel.
• Verify the list scrolls normally and does not jump back to the first result.
• Verify you can reach the bottom of the list.

Pagination

• Scroll to the bottom and verify the next 50 results load and get appended without losing the current ones.

Chromium

• Repeat the scroll test and verify nothing changed.

Keyboard

• Press ArrowDown a few times and verify the highlight moves and the list scrolls with it.

Summary by CodeRabbit

• Improvements
  • Autocomplete menus now render all available options.
  • Keyboard navigation scrolls the active option into view.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: ab104cd3-163f-49ef-9794-6ebf5e845321

📥 Commits

Reviewing files that changed from the base of the PR and between 07e8428 and 121e3ba.

📒 Files selected for processing: 1

• specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

📝 Walkthrough

AutoComplete removes virtualized option rendering. It renders every item in itemSource and scrolls the active option into view during keyboard navigation.

Changes: AutoComplete option rendering and keyboard scrolling

Layer / File(s)	Summary
Render options and scroll to the active item specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx	The component renders every itemSource entry as an option with its item index. Arrow-key and Home/End navigation scroll to the active option using that index.

Suggested reviewers: carolinedenis

Priority: ➖ Normal

Change: Bug fix · Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 121e3

The change is mergeable after normal checks; scrolling and keyboard navigation should still be tested as planned.

Pre-merge checks: 5 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Automatic Tests		The PR changes AutoComplete rendering and keyboard scrolling, but the diff changes only AutoComplete.tsx. Existing AutoComplete.test.tsx tests filtering, pagination, and selection; they do not t…	Add Jest tests in lib/components/Molecules/__tests__/AutoComplete.test.tsx. Cover rendering all returned results without virtualization, ArrowUp/ArrowDown/Home/End navigation, and calling scrollIntoView({ block: 'nearest' }) on the acti…

Passed checks: 5 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: removing virtualization from query combobox results.
Linked Issues check		The change addresses direct issue #8691. It removes virtualization from AutoComplete.tsx and mounts every itemSource option. Headless UI therefore keeps a stable option index while the user scroll…
Out of Scope Changes check		The reviewed change is limited to AutoComplete.tsx. It removes the virtualizer and updates keyboard scrolling to support the fix for #8691. The diff contains no demonstrated unrelated feature, migra…
Testing Instructions		The instructions are clear and match the changed behavior. The PR changes the shared AutoComplete list rendering and keyboard scrolling, and the instructions exercise query comboboxes in Firefox and…

Full details: Linked Issues check

Explanation

The change addresses direct issue #8691. It removes virtualization from AutoComplete.tsx and mounts every itemSource option. Headless UI therefore keeps a stable option index while the user scrolls. Keyboard navigation still calls scrollIntoView on the option with the matching data-index. No linked issue requirement mandates automated tests, although the PR reports none.

Full details: Out of Scope Changes check

Explanation

The reviewed change is limited to AutoComplete.tsx. It removes the virtualizer and updates keyboard scrolling to support the fix for #8691. The diff contains no demonstrated unrelated feature, migration, or refactoring work.

Full details: Testing Instructions

Explanation

The instructions are clear and match the changed behavior. The PR changes the shared AutoComplete list rendering and keyboard scrolling, and the instructions exercise query comboboxes in Firefox and Chromium, wheel scrolling, reaching the bottom, pagination, and ArrowDown navigation. The pagination check is accurate because QUERY_COMBO_BOX_PAGE_SIZE is 50 and QueryComboBox appends later pages.

Full details: Automatic Tests

Explanation

The PR changes AutoComplete rendering and keyboard scrolling, but the diff changes only AutoComplete.tsx. Existing AutoComplete.test.tsx tests filtering, pagination, and selection; they do not test that all results remain mounted or that keyboard navigation scrolls the active option. The PR description also leaves the automated-tests checklist item unchecked.

Resolution

Add Jest tests in lib/components/Molecules/__tests__/AutoComplete.test.tsx. Cover rendering all returned results without virtualization, ArrowUp/ArrowDown/Home/End navigation, and calling scrollIntoView({ block: 'nearest' }) on the active option. Include a regression case with enough results to verify that the active index remains associated with the correct row.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[g1rly-c0d3r]

Testing instructions

• Verify the list scrolls normally and does not jump back to the first result.
• Verify you can reach the bottom of the list.
• Scroll to the bottom and verify the next 50 results load and get appended without losing the current ones.
• Repeat the scroll test and verify nothing changed.
• Press ArrowDown a few times and verify the highlight moves and the list scrolls with it.

---

Looks good! I was able to scroll without issue on firefox.

[kwhuber]

• Verify the list scrolls normally and does not jump back to the first result.
• Verify you can reach the bottom of the list.
• Scroll to the bottom and verify the next 50 results load and get appended without losing the current ones.
• Repeat the scroll test and verify nothing changed.
• Press ArrowDown a few times and verify the highlight moves and the list scrolls with it.

---

Tested on CO and Taxon form.

[JDAM2k4]

Testing instructions

Firefox: scrolling in query combobox results

• Open a form that has a query combobox (for example Accession on a Collection Object, or Taxon on a Determination).
• Type a so the list has many results.
• Keep the pointer over the results and scroll down with the mouse wheel.
• Verify the list scrolls normally and does not jump back to the first result.
• Verify you can reach the bottom of the list.

Pagination

• Scroll to the bottom and verify the next 50 results load and get appended without losing the current ones.

Chromium

• Repeat the scroll test and verify nothing changed.

Keyboard

• Press ArrowDown a few times and verify the highlight moves and the list scrolls with it.

---

Tested on Geography from the Locality table. There's a brief delay when you start a new search where you can see the old results, but I don't think this is a problem.

On Edge, Firefox, and Chrome, all testing checks passed. However, I found that when you push the arrow keys to try to get to the bottom of the list, it will jump back to the beginning of the search results every time new results need to be loaded. You are able to scroll down, so I'm not sure if this is a bug that needs fixed.