onesine / react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.
https://react-tailwindcss-datepicker.vercel.app/
MIT License
552 stars 170 forks source link

[Bug] Calendar popup direction is only calculated on initial component loading #195

Open atsuo-takahashi opened 1 year ago

atsuo-takahashi commented 1 year ago

https://github.com/onesine/react-tailwindcss-datepicker/blob/bf063fe6458787622ca500ec9a33d9b2feb955d1/src/components/Datepicker.tsx#L169-L185

Currently, calendar popup direction (left or right) is determined by comparing window center and component center. However, its calculation is only executed on initial component loading because statements are written within useEffect and second argument array is blank.

This causes the problem when component position changed after its initial loading.

Example

Initial position is right side from window center, so calendar popup direction is left.

popup-fix-1

Then, narrow window size.

popup-fix-2

Page layout is flex box design and component comes to left side when window size become narrow. On this situation, calendar popup direction is not re-calculated, so its popup direction is still left and this causes users cannot click most part of calendar popup.

Possible solution is calculate direction each time when calendar pops up.

atsuo-takahashi commented 1 year ago

I opened PR #196

kingekinge commented 1 year ago

should be provided params to control pop up left or right

atsuo-takahashi commented 1 year ago

@kingekinge Thank you for your nice comment! I also think it would be nice to have params to control horizontal direction left | right | auto

in the PR above, I just fixed auto direction calculation logic.

akashengagebay commented 1 year ago

@atsuo-takahashi I am facing an issue , When the calender pops-up the direction is being left in my case

Screenshot from 2023-10-13 19-23-26

but when i checked with offical site it was on the left side . Screenshot from 2023-10-13 19-23-48

i want it to pop on from the left side . how can it be changed? Screenshot from 2023-10-13 19-28-52

atsuo-takahashi commented 1 year ago

@akashengagebay There is no way to review your code, so following comment is my guess...

I think your situation is depends on component's horizontal positioning on your page. i.e. If your DatePicker component is located right side of the page, it pops up to left. At this moment, this horizontal pop up direction is automatically determined by coordinate (x axis) calculations.

As @kingekinge mentioned above, it would be nice to have an option to select horizontal pop up direction.

auzanxp commented 3 months ago

i tried to hardcode the popup position and its works

  useEffect(() => {
    const popoverElement = document.querySelector(
      '.transition-all.absolute.z-10',
    );
    const arrowElement = document.querySelector(
      '.absolute.z-20.h-4.w-4.rotate-45',
    );

    if (popoverElement) {
      popoverElement.classList.add('right-0');
      popoverElement.classList.remove('left-0');
    }

    if (arrowElement) {
      arrowElement.classList.add('right-0', 'mr-3.5');
    }
  }, [date]);