feat: add scrollIntoView for timepicker, datepicker and daterangepick…

…er popup affects: @medly-components/core, @medly-components/forms
medly · Jun 24, 2024 · 8a93bb4 · 8a93bb4
1 parent 5f91663
commit 8a93bb4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/core/src/components/Calendar/Calendar.tsx b/packages/core/src/components/Calendar/Calendar.tsx
@@ -2,7 +2,7 @@ import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components
 import { WithStyle } from '@medly-components/utils';
 import { endOfDay } from 'date-fns';
 import type { FC } from 'react';
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { PopoverContext } from '../Popover/Popover.context';
 import Text from '../Text';
 import * as Styled from './Calendar.styled';
@@ -14,6 +14,7 @@ import { CalendarProps } from './types';
 const Component: FC<CalendarProps> = memo(
     ({ date, onChange, minSelectableDate, maxSelectableDate, isErrorPresent, defaultMonth = 0, defaultYear, ...restProps }) => {
         const today = new Date(),
+            ref = useRef<HTMLDivElement>(null),
             defaultDate = defaultYear ? new Date(defaultYear, defaultMonth, 1) : null,
             [, setCalenderVisibility] = useContext(PopoverContext),
             [{ month, year }, setMonthAndYear] = useState(getMonthAndYearFromDate(date || defaultDate || today)),
@@ -46,8 +47,12 @@ const Component: FC<CalendarProps> = memo(
             );
         }, [date, minSelectableDate, maxSelectableDate]);
 
+        useEffect(() => {
+            ref.current?.scrollIntoView(true);
+        }, []);
+
         return (
-            <Styled.Calendar {...restProps}>
+            <Styled.Calendar ref={ref} {...restProps}>
                 <Styled.Header>
                     <MonthAndYearSelection
                         id={restProps.id}

diff --git a/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx b/packages/core/src/components/DateRangePicker/DateRangeCalendar/DateRangeCalendar.tsx
@@ -1,7 +1,7 @@
 import { KeyboardArrowLeftIcon, KeyboardArrowRightIcon } from '@medly-components/icons';
 import { WithStyle } from '@medly-components/utils';
 import type { FC } from 'react';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as DatePickerStyled from '../../Calendar/Calendar.styled';
 import MonthAndYearSelection from '../../Calendar/MonthAndYearSelection';
 import { getMonthAndYearFromDate, getNextMonthAndYear, getPreviousMonthAndYear } from '../../Calendar/helper';
@@ -25,7 +25,8 @@ const Component: FC<Props> = memo(props => {
         } = props,
         { startDate, endDate } = selectedDates;
 
-    const [hoveredDate, setHoveredDate] = useState<Date | null>(null),
+    const ref = useRef<HTMLDivElement>(null),
+        [hoveredDate, setHoveredDate] = useState<Date | null>(null),
         [slideDirection, setSlideDirection] = useState<CalendarAnimationTypes>('move-in-left'),
         [{ month, year }, setMonthAndYear] = useState(getMonthAndYearFromDate(startDate || new Date())),
         { month: nextMonth, year: nextYear } = useMemo(() => getNextMonthAndYear(month, year), [month, year]),
@@ -96,9 +97,14 @@ const Component: FC<Props> = memo(props => {
             setMonthAndYear(getPreviousMonthAndYear(endDate.getMonth(), endDate.getFullYear()));
     }, [selectedDates.startDate, selectedDates.endDate]);
 
+    useEffect(() => {
+        ref.current?.scrollIntoView(true);
+    }, []);
+
     return (
         <Styled.DateRangeCalendar
             id={id}
+            ref={ref}
             size={size!}
             placement={placement!}
             onClick={handleCalendarClick}

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 && setTimeout(() => popupRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
+            isOpen && popupRef.current?.scrollIntoView(true);
         }, [isOpen]);
 
         return isOpen ? <PopupStyled ref={popupRef} onClick={stopPropagation} placement={props.placement!} {...props} /> : null;