[Select] wrong position of content

[federicocappellotto97]

As you can see in the video the content has wrong position (because of wrong transform) only when i open the select. If i scroll the position changes and it get fixed.
https://user-images.githubusercontent.com/63153191/220315409-35fc6c46-acb8-4545-8b44-6c998f80d1a8.mov

"radix-ui": "^1.0.1",
"react": "18.2.0",
yarn

[benoitgrelard]

Hey @federicocappellotto97, are you able to reproduce this in a sandbox?

[federicocappellotto97]

Hey @federicocappellotto97, are you able to reproduce this in a sandbox?

I'm sorry, but at the moment i can't reproduce it in a sandbox..
I'm using Stitches

This is my component:

import React from 'react'

import * as Select from '@radix-ui/react-select'

import { Text } from '@/lib/styled'
import { hasData } from '@/lib/utils'

import * as Styles from './Dropdown.style'

export type IOption = {
    value: string
    label: string
}
export type DropdownProps = {
    label: string
    name?: string
    options: IOption[]
    onChange?: Function
    value?: any
    defaultValue?: any
}

const Dropdown: React.FC<DropdownProps> = ({ options, value, label, onChange }) => {
    return (
        hasData(options) && (
            <Select.Root
                value={value?.value}
                onValueChange={typeof onChange === 'function' ? (val) => onChange(val) : undefined}
            >
                <Styles.Trigger css={{ '> span': { overflow: 'hidden' } }}>
                    <Select.Value placeholder={label} />
                    <Styles.Icon />
                </Styles.Trigger>

                <Select.Portal>
                    <Styles.Content position="popper" sideOffset={4}>
                        <Select.ScrollUpButton />
                        <Select.Viewport>
                            {options.map(({ value, label }, i) => (
                                <Styles.Item value={value} key={i}>
                                    <Select.ItemText>
                                        <Text
                                            fontVariant={'secondary14'}
                                            css={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
                                        >
                                            {label}
                                        </Text>
                                    </Select.ItemText>
                                    <Select.ItemIndicator />
                                </Styles.Item>
                            ))}
                        </Select.Viewport>
                        <Select.ScrollDownButton />
                    </Styles.Content>
                </Select.Portal>
            </Select.Root>
        )
    )
}

export default Dropdown

[benoitgrelard]

Without a reproduction it will be very difficult to verify if there's an issue or not.
I'll leave the issue open and when you have time, please provide a reproduction, otherwise feel free to close the issue 👍

[roryhen]

I'm experiencing the same issue with the DropdownMenu component, on open it's not positioned correctly, until the window is resized or you scroll. I think it may be related to text that wraps in the DropdownMenu.Content
Here's a minimal repro: https://codesandbox.io/s/jovial-mcnulty-7j9161?file=/src/App.js

[joaom00]

@roryhen It looks like a bug when using --radix-dropdown-menu-trigger-width not being able to calculate the correct position of the content. In the meantime, you need to hard coded the trigger width

[roryhen]

@joaom00 thanks for the tip and for submitting a fix, I'll keep an eye on it