feat: autoscroll singleselect options in view

affects: @medly-components/core
medly · Jan 26, 2025 · d413d39 · d413d39
1 parent a1f33b9
commit d413d39
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/packages/core/src/components/SingleSelect/Options/Options.tsx b/packages/core/src/components/SingleSelect/Options/Options.tsx
@@ -1,26 +1,34 @@
-import { WithStyle } from '@medly-components/utils';
+import { useCombinedRefs, WithStyle } from '@medly-components/utils';
 import type { FC } from 'react';
-import { forwardRef, memo } from 'react';
+import { forwardRef, memo, useEffect, useRef } from 'react';
 import Option from './Option';
 import * as Styled from './Options.styled';
 import { OptionsProps } from './types';
 const Component: FC<OptionsProps> = memo(
-    forwardRef(({ options, onOptionClick, hasError, ...restProps }, ref) => (
-        <Styled.Options {...restProps} ref={ref}>
-            {options.map(option => (
-                <Option
-                    key={option.value}
-                    {...option}
-                    variant={restProps.variant}
-                    onClick={onOptionClick}
-                    hasError={hasError}
-                    size={restProps.size}
-                    maxWidth={restProps.maxWidth}
-                    includesNestedOptions={restProps.includesNestedOptions}
-                />
-            ))}
-        </Styled.Options>
-    ))
+    forwardRef(({ options, onOptionClick, hasError, ...restProps }, ref) => {
+        const optionsRef = useCombinedRefs<HTMLUListElement>(ref, useRef(null));
+
+        useEffect(() => {
+            optionsRef?.current?.scrollIntoView({ behavior: 'smooth' });
+        }, []);
+
+        return (
+            <Styled.Options {...restProps} ref={optionsRef}>
+                {options.map(option => (
+                    <Option
+                        key={option.value}
+                        {...option}
+                        variant={restProps.variant}
+                        onClick={onOptionClick}
+                        hasError={hasError}
+                        size={restProps.size}
+                        maxWidth={restProps.maxWidth}
+                        includesNestedOptions={restProps.includesNestedOptions}
+                    />
+                ))}
+            </Styled.Options>
+        );
+    })
 );
 Component.defaultProps = {
     isNested: false