fix(web): keep select poppers in collision bounds (#755)

Signed-off-by: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
This commit is contained in:
XiaoSeS 2026-08-25 20:07:58 +08:00 committed by GitHub
parent 5a95278528
commit 7599dd0ca9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 3 deletions

View file

@ -48,6 +48,11 @@ describe('shared select contract', () => {
expect(SELECT_CONTENT_CLASS_NAME).toContain('overflow-x-hidden')
})
it('does not move popper content with static translate utilities', () => {
expect(SELECT_CONTENT_CLASS_NAME).not.toContain('translate-y-1')
expect(SELECT_CONTENT_CLASS_NAME).not.toContain('translate-x-1')
})
it('uses pointer cursors for expanded select interactions', () => {
expect(SELECT_ITEM_CLASS_NAME).toContain('cursor-pointer')
expect(SELECT_SCROLL_BUTTON_CLASS_NAME).toContain('cursor-pointer')

View file

@ -89,16 +89,15 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
>(({ className, children, position = 'popper', sideOffset = 4, ...props }, ref) => (
// No Portal: Content stays in the React tree with its trigger so route/Dialog
// unmount cannot orphan a body/#skillhub-portals node (removeChild).
<SelectPrimitive.Content
ref={ref}
translate="no"
sideOffset={sideOffset}
className={cn(
SELECT_CONTENT_CLASS_NAME,
position === 'popper'
&& 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className
)}
position={position}