search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.72k stars 1.46k forks source link

[BUG] - <Select /> is immediately blurred because of scroll-down on mobile when `popoverContent` overflows the viewport #3782

Open gdbroman opened 3 weeks ago

gdbroman commented 3 weeks ago

NextUI Version

2.4.6

Describe the bug

When focusing <Select /> on a small mobile screen and where popover content overflows at the bottom of the viewport, it causes the <Select /> to immediately blur and close the popover content. It also causes the page to scroll down, which feels very buggy.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

  1. instantiate a <Select />
  2. increase the popoverContent's height to ~400px
  3. open the Select on iOS safari
  4. watch the page scroll and the select close

Expected behavior

As a user I expect the <Select /> to remain opened, even if the page scrolls down.

Alternatively, I expect a disableScroll prop. For instance, the Autocomplete doesn't autoscroll when its popoverContent overflows the viewport, because its default behaviuour is to not cause the page to scroll.

Screenshots or Videos

No response

Operating System Version

iOS 17.6.1

Browser

Safari

linear[bot] commented 3 weeks ago

ENG-1374 [BUG] - <Select /> causes scroll-down on mobile when the popovercontent doesn't fit on the screen

wingkwong commented 3 weeks ago
  1. please try on v2.4.8
  2. if it's still reproducible, please provide a minimal reproducible environment and a screen recording for demostration
AnYiEE commented 3 weeks ago

This PR may indirectly bypass this issue. https://github.com/nextui-org/nextui/pull/3595