react-tailwindcss-datepicker
react-tailwindcss-datepicker copied to clipboard
Upgrade to tailwinds v4
Fix for a bug where the popup doesn't appear with latest tailwinds version v4.
How i fixed this on src/components/icons/Input.tsx
function showCalendarContainer
one line 253 change div.classList.add("opacity-1"); -> div.classList.add("opacity-100");
function showCalendarContainer() {
if (arrow && div && div.classList.contains("hidden")) {
div.classList.remove("hidden");
div.classList.add("block");
// window.innerWidth === 767
const popoverOnUp = popoverDirection == "up";
const popoverOnDown = popoverDirection === "down";
if (
popoverOnUp ||
(window.innerWidth > 767 &&
window.screen.height - 100 < div.getBoundingClientRect().bottom &&
!popoverOnDown)
) {
div.classList.add("bottom-full");
div.classList.add("mb-2.5");
div.classList.remove("mt-2.5");
arrow.classList.add("-bottom-2");
arrow.classList.add("border-r");
arrow.classList.add("border-b");
arrow.classList.remove("border-l");
arrow.classList.remove("border-t");
}
setTimeout(() => {
div.classList.remove("translate-y-4");
div.classList.remove("opacity-0");
div.classList.add("translate-y-0");
div.classList.add("opacity-100");
}, 1);
}
}
This also works as a quick and dirty workaround until this PR merges and a new version of the package gets released:
.opacity-1 {
/* https://github.com/onesine/react-tailwindcss-datepicker/pull/307 */
@apply opacity-100;
}