fix: scroll selected option into view when select + filter

Author: mxschll

src/select/__tests__/use-select.test.ts

@@ -449,15 +449,21 @@ describe('useSelect', () => {
     });
   });
 
-  test('select with filter should open and NOT navigate to selected option', () => {
+  test('select with filter should open and navigate to selected option', () => {
     const hook = renderHook(useSelect, {
-      initialProps: { ...initialProps, selectedOptions: [{ value: 'child1' }] },
+      initialProps: { ...initialProps, selectedOptions: [{ value: 'child1' }], filteringValue: '' },
     });
     const { getTriggerProps } = hook.result.current;
     const triggerProps = getTriggerProps();
     act(() => triggerProps.onKeyDown && triggerProps.onKeyDown(createTestEvent(KeyCode.space)));
     expect(hook.result.current.isOpen).toBe(true);
-    expect(hook.result.current.highlightedOption).toBeFalsy();
+    expect(hook.result.current.highlightedOption).toEqual({
+      type: 'child',
+      option: {
+        label: 'Child 1',
+        value: 'child1',
+      },
+    });
   });
 
   describe('calculates if the highlighted option is selected', () => {

src/select/utils/use-select.ts

@@ -305,9 +305,9 @@ export function useSelect({
 
   const prevOpen = usePrevious<boolean>(isOpen);
   useEffect(() => {
-    // highlight the first selected option, when opening the Select component without filter input
+    // highlight the first selected option and scroll into view
     // keep the focus in the filter input when opening, so that screenreader can recognize the combobox
-    if (isOpen && !prevOpen && options.length > 0 && !hasFilter) {
+    if (isOpen && !prevOpen && options.length > 0) {
       if (openedWithKeyboard) {
         if (__selectedOptions[0]) {
           highlightOptionWithKeyboard(__selectedOptions[0]);
@@ -334,7 +334,6 @@ export function useSelect({
     openedWithKeyboard,
     options,
     prevOpen,
-    hasFilter,
   ]);
 
   useEffect(() => {