Open atsuo-takahashi opened 1 year ago
I opened PR #196
should be provided params to control pop up left or right
@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.
@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?
@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.
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]);
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.
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.