Datepicker has transparent background on 4.0
Describe the bug
When I upgrade to 4.0 my datepicker has a transparent background (which then shows the page behind it). Happens in light and dark mode.
This works fine in 3.1.2.
Is this a known change of behavior and something I have to confiure to work around?
To Reproduce
This is the html that is reproducing it on my side, though I have other styles on the page:
<div class="relative max-w-sm">
<div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
</svg>
</div>
<input datepicker id="default-datepicker" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
</div>
Expected behavior A clear and concise description of what you expected to happen.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Ubuntu
- Browser Chrome
Additional context I'm not sure if there are any other styles on my page that might be interfering with this... If it isn't readily reproducible in a standard project I can try to dig deeper.
Same problem.
hey @czue, @rungg12,
did you also upgrade your project to tailwind v4 and flowbite v4?
https://flowbite.com/docs/getting-started/quickstart/
some classes have changed and we introduced variables
no there was no change. I use it at multiple pages on my webapp, but it does this only in one site, all the others work fine.
have you updated the v4.0.1?
in the v4.0.1 patch from v4.0.0 we actually added the proper styles for the datepicker
I just tested again on 4.0.1 and am still seeing the issue. I'm also using DaisyUI on the page if that might matter...