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

[atsuo-takahashi]

react-tailwindcss-datepicker/src/components/Datepicker.tsx

Lines 169 to 185 in bf063fe

	useEffect(() => {
	const container = containerRef.current;
	const calendarContainer = calendarContainerRef.current;
	const arrow = arrowRef.current;
	if (container && calendarContainer && arrow) {
	const detail = container.getBoundingClientRect();
	const screenCenter = window.innerWidth / 2;
	const containerCenter = (detail.right - detail.x) / 2 + detail.x;
	if (containerCenter > screenCenter) {
	arrow.classList.add("right-0");
	arrow.classList.add("mr-3.5");
	calendarContainer.classList.add("right-0");
	}
	}
	}, []);

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.

Then, narrow window size.

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]

I opened PR #196

[kingekinge]

should be provided params to control pop up left or right

[atsuo-takahashi]

@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]

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

but when i checked with offical site it was on the left side .

i want it to pop on from the left side .
how can it be changed?

[atsuo-takahashi]

@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]

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]);