Skip to content

Conversation

terrydkim
Copy link
Contributor

@terrydkim terrydkim commented Oct 10, 2025

Fixes #8321

Hello :D ,
I've resolved the infinite scrolling issue in the Select component.

Changes:

Modified the shift padding value from 5 to 0 in use-popover.ts

Issue Details:

The Combobox renders through a portal, which made this issue a bit tricky to track down. 😅
To reproduce this issue, you can easily observe it by removing the padding from the Combobox's parent div in the Demo.

Root Cause:

The problem occurred when the Combobox had left padding. Since the shift middleware is enabled by default in the popover's defaultProps, the component would get pushed by 5px padding and then pulled back by the shift, creating a loop that resulted in infinite scrolling.

Solution:

I've set the default padding value of the shift middleware to 0 in use-popover.ts.

Side Effects:

This change may affect the Popover Arrow component. If you'd like to modify only the Combobox without impacting other components, you can configure the Combobox props with shift: { padding: 0 } instead.

<Combobox 
  middlewares={{ 
    shift: { padding: 0 }
  }}
>
  {/* ... */}
</Combobox>

If you could suggest an alternative approach, I'd be happy to implement it accordingly. Thank you.

Before

Normal

스크린샷 2025-10-11 오전 1 10 02

Bug

스크린샷 2025-10-11 오전 1 09 55
2025-10-11.2.59.40.mov

After

스크린샷 2025-10-11 오전 2 10 14
2025-10-11.3.00.11.mov

@rtivital
Copy link
Member

I'd rather not change those values in the library. Instead, it is better to update the documentation and include a section in select component that mentions this behavior.

@terrydkim
Copy link
Contributor Author

Thank you for the feedback!
I'll close this PR and create a new one that adds documentation instead. 😆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Select can scroll to infinity

2 participants