[autocomplete] Fix highlight sync and scroll preservation by mj12albert · Pull Request #48322 · mui/material-ui (original) (raw)

Before: https://stackblitz.com/edit/oeui5u2z-2ocdxxvp?file=src%2FDemo.tsx
After: https://stackblitz.com/edit/oeui5u2z-r5vp8zge?file=src%2FDemo.tsx

Manual testing steps

1. Highlight mismatch when reopening (#48177)

  1. Click the input, then ArrowDown to move the highlight, "two" should be highlighted
  2. Press Esc to close the listbox
  3. ArrowDown once to reopen the listbox, then press Enter

Before: "two" is highlighted by step 3 and removed by Enter (the active highlight was stuck after step 1 and Esc failed to clear it)

After: "one" is highlighted by step 3 and removed by Enter

2. Adding options resets scroll position (#40250)

  1. Click the input to open the listbox
  2. Scroll once to the bottom of the listbox
  3. Wait for more options to be added

Before: when options are added the scroll position resets to the top

After: scroll position preserved when options are added

Without the scroll position fix, it's impossible to make a sane infinite loading UX; example Tanstack Query useInfiniteQuery integration with the fix: https://stackblitz.com/edit/rqmnxopa?file=src%2FDemo.tsx

Fixes #40250
Fixes #48177