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

[trankhanhtkkt-ta]

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.