react-tailwindcss-datepicker icon indicating copy to clipboard operation
react-tailwindcss-datepicker copied to clipboard

Upgrade to tailwinds v4

Open John4E656F opened this issue 10 months ago • 1 comments

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

John4E656F avatar Feb 14 '25 09:02 John4E656F

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;
}

Alex-ley-scrub avatar Feb 16 '25 00:02 Alex-ley-scrub