themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

bug: Datepicker always displays below input field #1350

Open brian-bigleaf opened 3 months ago

brian-bigleaf commented 3 months ago

Steps to reproduce

  1. Go to any datepicker example in the docs (i.e. title)
  2. Scroll so that the input field is at the bottom of the viewable content
  3. Open datepicker
  4. Datepicker displays below the field and requires scrolling to view

Current behavior

Unlike the tooltip or popover components, Datepicker does not have a sense of it's location on the page and will always show the datepicker below the input field

Expected behavior

Datepicker should behave like the tooltip and popover components where it will display above the field if there isn't enough space under it to fully display.

Context

Looking to improve a confusing user experience when opening the datepicker at the bottom of a page or container. It may not be obvious to the user that they are required to scroll to select a date. See screenshot below, where the datepicker is past the browser's viewport:

image