diff --git a/packages/core/src/components/Calendar/Calendar.tsx b/packages/core/src/components/Calendar/Calendar.tsx index 28a1b4401..70fcf023c 100644 --- a/packages/core/src/components/Calendar/Calendar.tsx +++ b/packages/core/src/components/Calendar/Calendar.tsx @@ -48,7 +48,7 @@ const Component: FC = 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 index 938d88ee5..d3be9fb7f 100644 --- 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 = 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 index ee145f958..5a223fe51 100644 --- 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 = 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 ? : null; diff --git a/packages/core/src/components/SingleSelect/Options/Option/Option.tsx b/packages/core/src/components/SingleSelect/Options/Option/Option.tsx index d138fcb68..fb2aad599 100644 --- 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 = memo(props => { useEffect(() => { (selected || hovered) && ref.current?.scrollIntoView({ + behavior: 'instant', block: 'nearest' }); }, [selected, hovered]);