Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Controlled Select component is resetting itself only on React 19 #3381

Closed
BoneFiend opened this issue Feb 13, 2025 · 1 comment
Closed

Controlled Select component is resetting itself only on React 19 #3381

BoneFiend opened this issue Feb 13, 2025 · 1 comment

Comments

@BoneFiend
Copy link

Bug report

Current Behavior

  1. The Select is initially mounted in a component with a default value ('1').
  2. After a short delay (simulated with useEffect), the component updates the value to '2'.
  3. Select receives this updated value but spontaneously calls onValueChange with an empty string, which resets the value to ''.

Image

Expected behavior

Select should accept the controlled value without spontaneously resetting it to blank. Console observed in React 18:

Image

Reproducible example

export function SelectTest() {
  const [value, setValue] = useState('1')

  console.log('value:', value)

  const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]

  useEffect(() => {
    console.log('resetting to 2')
    setValue('2')
  }, [])

  const onChange = (value: string) => {
    console.log('onChange:', value)
    setValue(value)
  }

  return (
    <Select.Root value={value} onValueChange={onChange}>
      <Select.Trigger className="flex w-20 justify-between border border-ui-accent bg-ui-blank">
        <Select.Value />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Content className="border border-ui-accent bg-ui-blank">
          <Select.Viewport>
            {options.map((option) => (
              <Select.Item key={option.value} value={option.value}>
                <Select.ItemText>{option.value}</Select.ItemText>
                <Select.ItemIndicator />
              </Select.Item>
            ))}
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  )
}

Additional context

This issue only occurs when using React 19. The above code has been tested on React 18 with no issue

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-select 2.1.6
React n/a 19.0.0
Browser Firefox 135.0
Assistive tech
Node n/a v20.12.2
npm/yarn pnpm 9.0.6
Operating System Windows 11
@BoneFiend
Copy link
Author

BoneFiend commented Feb 24, 2025

This issue is actually the fault of React 19 improperly handling select inputs inside form tags. See React issue 30580

@BoneFiend BoneFiend closed this as not planned Won't fix, can't repro, duplicate, stale Feb 24, 2025
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

No branches or pull requests

1 participant