fix: scroll popup into view only if required

affects: @medly-components/core, @medly-components/forms
medly · Jun 27, 2024 · e5967d8 · e5967d8
1 parent 1e3e30a
commit e5967d8
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/packages/core/src/components/Calendar/Calendar.tsx b/packages/core/src/components/Calendar/Calendar.tsx
@@ -48,7 +48,7 @@ const Component: FC<CalendarProps> = memo(
         }, [date, minSelectableDate, maxSelectableDate]);
 
         useEffect(() => {
-            ref.current?.scrollIntoView(true);
+            ref.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
         }, []);
 
         return (

diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx
@@ -98,7 +98,7 @@ const Component: FC<Props> = memo(props => {
     }, [selectedDates.startDate, selectedDates.endDate]);
 
     useEffect(() => {
-        ref.current?.scrollIntoView(true);
+        ref.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
     }, []);
 
     return (

diff --git a/packages/core/src/components/Popover/Popup/Popup.tsx b/packages/core/src/components/Popover/Popup/Popup.tsx
@@ -12,7 +12,7 @@ const Component: FC<PopoverPopupProps> = memo(
             stopPropagation = useCallback((e: React.MouseEvent) => e.stopPropagation(), []);
 
         useEffect(() => {
-            isOpen && popupRef.current?.scrollIntoView(true);
+            isOpen && popupRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
         }, [isOpen]);
 
         return isOpen ? <PopupStyled ref={popupRef} onClick={stopPropagation} placement={props.placement!} {...props} /> : null;

diff --git a/packages/core/src/components/SingleSelect/Options/Option/Option.tsx b/packages/core/src/components/SingleSelect/Options/Option/Option.tsx
@@ -1,5 +1,5 @@
 import { ArrowRightIcon, CheckIcon } from '@medly-components/icons';
-import { useKeyPress, useOuterClickNotifier, WithStyle } from '@medly-components/utils';
+import { WithStyle, useKeyPress, useOuterClickNotifier } from '@medly-components/utils';
 import type { FC } from 'react';
 import { isValidElement, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { withTheme } from 'styled-components';
@@ -32,6 +32,7 @@ const Component: FC<OptionProps> = memo(props => {
     useEffect(() => {
         (selected || hovered) &&
             ref.current?.scrollIntoView({
+                behavior: 'instant',
                 block: 'nearest'
             });
     }, [selected, hovered]);