primefaces / primefaces/primereact
ListBox: after clicking on the box item the scrollbar moves to incorrect position causing annoying user experience.
Nobody has claimed this yet.
- Dominant language
- CSS
- Stars
- 8.3k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
On the demo page for the Listbox Group, when I click on an item near the top and scroll to the bottom of the list, then the scrollbar automatically backs to the top of the list.
This behavior is very annoying. I'm using version 10.6.3. Checking the source code, I found the issue is caused by the following line:
// listbox.esm.js
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedOptionIndex = _React$useState2[0],
setFocusedOptionIndex = _React$useState2[1];
This makes focusedOptionIndex reset to null on every re-rendering of ListBox component. Changing this block to the following fixes the issue:
var _React$useRef = React.useRef(null),
focusedOptionIndex = _React$useRef.current,
setFocusedOptionIndex = (i) => focusedOptionIndex = i;
var searchTimeout = React.useRef(null);
Please help to update the code.
Reproducer
No response
System Information
System:
OS: Windows 11 10.0.22621
CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
Memory: 14.34 GB / 31.69 GB
Binaries:
Node: 22.5.1 - C:\Program Files\nodejs\node.EXE
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527
npmPackages:
primereact: ^10.6.3 => 10.6.3
react: ^18.2.0 => 18.2.0
tailwindcss: ^3.4.3 => 3.4.3
Steps to reproduce the behavior
- Go to any ListBox component demo page that has scrollbar for example the Template.
- Click to "China".
- Scroll to bottom using the mouse wheel or by left-click on the scrollbar and hold and drag it to bottom.
- On scrolling stops or releasing the mouse (if using the latter method in step 3.), the scrollbar automatically scrolls back to the top.
Expected behavior
After step 3, the scrollbar should not scroll to the top.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the ListBox implementation corresponding to the generated listbox.esm.js code, then reproduce the issue on the Template demo using the listed steps. Trace how focusedOptionIndex is retained across re-renders and verify the scrollbar stays at the bottom after scrolling. Done means the reported interaction no longer moves the scrollbar to the top and the behavior is covered by an appropriate regression check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100