Dropdown: keyboard navigation doesn't scroll items list into view

[hitosu]

Describe the bug

When using keyboard navigation on Dropdown list with selectOnFocus prop set to false (default value, prop is missing from .d.ts BTW) - focused item is not scrolled into view.

Reproducer

https://primereact.org/dropdown/#filter

PrimeReact version

10.5.1

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Open Dropdown with scrollable items list.
2. Press ArrowDown several times until focused item is hidden below.

Expected behavior

List should be scrolled into view when focused items changed.

This could be fixed with selecting data-p-focused="true" first:

        const scrollInView = () => {
            const focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-focused="true"]');

            if (focusedItem && focusedItem.scrollIntoView) {
                focusedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
            } else {
                const highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');

                if (highlightItem && highlightItem.scrollIntoView) {
                    highlightItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                }
            }
        };

And adding focusedOptionIndex into useUpdateEffect:

        useUpdateEffect(() => {
            if (overlayVisibleState && (props.value || -1 < focusedOptionIndex)) {
                scrollInView();
            }
        }, [overlayVisibleState, props.value, focusedOptionIndex]);

[melloware]

@hitosu can you submit a PR?

[hitosu]

@melloware I would love to contribute directly, but I still checking if I'm able to (from the legal perspective). Commenting with code is ok.

[endygomez]

I have the same problem.

[melloware]

PR submitted