nextui icon indicating copy to clipboard operation
nextui copied to clipboard
verified publisher icon nextui-org

[BUG] - Select causes page shift when trying to change selection

Open hiDandelion opened this issue 1 year ago • 12 comments

NextUI Version

2.6.10

Describe the bug

When an option in Select is selected and the page position is changed, you cannot open the selection modal on your next click on Select. Instead, it will cause a page position shift. In worse cases, the selection modal can no longer be opened after your first selection. The bug can be found on the official NextUI example page.

Your Example Website or App

https://nextui.org/docs/components/select

Steps to Reproduce the Bug or Issue

  1. Choose an option in Select
  2. Scroll the web page
  3. Click on Select

Expected behavior

As a user, I expect I can change my selected option when I click on Select the second time.

Screenshots or Videos

https://github.com/user-attachments/assets/147e1fdd-60a4-467e-8c05-59dc3175442c

Operating System Version

macOS

Browser

Safari

hiDandelion avatar Jan 04 '25 12:01 hiDandelion

ENG-1824 [BUG] - Select causes page shift when trying to change selection

linear[bot] avatar Jan 04 '25 12:01 linear[bot]

@wingkwong Could you assign to me?

jijiseong avatar Jan 07 '25 00:01 jijiseong

@jijiseong done

wingkwong avatar Jan 07 '25 01:01 wingkwong

Can you assign this issue to me?

roshan-Kawale avatar Jan 11 '25 16:01 roshan-Kawale

Related to https://github.com/heroui-inc/heroui/issues/4503

ryo-manba avatar Jan 19 '25 13:01 ryo-manba

Well, how is this issue going? I am facing the same issue, this would hamper the user experience.

criskell avatar May 30 '25 18:05 criskell

Well, how is this issue going? I am facing the same issue, this would hamper the user experience.

This bug still exists and you may use Virtualized Select(set isVirtualized prop to true) as a temporary solution.

hiDandelion avatar May 31 '25 01:05 hiDandelion

Well, how is this issue going? I am facing the same issue, this would hamper the user experience.

This bug still exists and you may use Virtualized Select(set isVirtualized prop to true) as a temporary solution.

Thanks! Unfortunately changing to isVirtualized didn't work in my case.

I managed to solve it by adding setInteractionModality('virtual') in the onOpenChange function of Select component. setInteractionModality being imported from @react-aria/interactions.

criskell avatar May 31 '25 03:05 criskell

@hiDandelion @criskell which version are you guys using? I'm not able to reproduce the issue following OP's steps. If possible, please share a sandbox.

wingkwong avatar May 31 '25 11:05 wingkwong

@hiDandelion @criskell which version are you guys using? I'm not able to reproduce the issue following OP's steps. If possible, please share a sandbox.

Sorry, I forgot to mention. This issue is now resolved most cases, but still exists in some scenarios like in mobile mode. I've attached a screenshot to reproduce this issue. You may notice when I touched Select component, only a page shift happened.

Environment:

HeroUI 2.7.8 iOS 18.5

Screenshot:

https://github.com/user-attachments/assets/2d820137-82a4-41d0-91bd-d69474aa7448

hiDandelion avatar Jun 01 '25 00:06 hiDandelion

@hiDandelion can you help check if you can reproduce the issue on our beta doc on your phone? https://beta.heroui.com/docs/components/select

wingkwong avatar Jun 01 '25 03:06 wingkwong

@hiDandelion can you help check if you can reproduce the issue on our beta doc on your phone? https://beta.heroui.com/docs/components/select

Sure. Thank you for addressing this issue.

https://github.com/user-attachments/assets/0c0ac576-3cfc-428b-a799-e073d0f9b13a

hiDandelion avatar Jun 01 '25 07:06 hiDandelion