primefaces / primefaces/primereact

ListBox: after clicking on the box item the scrollbar moves to incorrect position causing annoying user experience.

Open
#7,150 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: Accessibility
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
  1. Go to any ListBox component demo page that has scrollbar for example the Template.
  2. Click to "China".
  3. Scroll to bottom using the mouse wheel or by left-click on the scrollbar and hold and drag it to bottom.
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.