flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

bug: Datepicker always displays below input field

Open brian-bigleaf opened this issue 3 months ago • 0 comments

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] I have tested the latest version

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

brian-bigleaf avatar Apr 04 '24 19:04 brian-bigleaf