chakra-ui/ark

Select - defaultValue Not Setting Initial Value

JUNNNI opened this issue · 1 comments

JUNNNI commented

Issue: defaultValue Not Setting Initial Value for Select

Description

When following the Ark UI documentation example for usage with a form library, I attempted to set a defaultValue using React Hook Form as follows:

const { register, handleSubmit } = useForm<Inputs>({
  defaultValues: {
    framework: 'React',
  },
})

The expected behavior is for the ArkSelect component to populate with the value "React" upon initialization. However, the ArkSelect does not display the default value.

Steps to Reproduce

Use the provided FormLibrary component code (see below).
Render the FormLibrary component.
Observe the behavior: the Select field does not show "React" as the default value.

Full Reproducible Component Code

interface Inputs {
  framework: string
}

export const FormLibrary = () => {
  const collection = createListCollection({ items: ['React', 'Solid', 'Vue'] })

  const { register, handleSubmit } = useForm<Inputs>({
    defaultValues: {
      framework: 'React',
    },
  })

  const onSubmit: SubmitHandler<Inputs> = (data) => window.alert(JSON.stringify(data))

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ArkSelect.Root collection={collection}>
        <ArkSelect.Label>Framework</ArkSelect.Label>
        <ArkSelect.HiddenSelect {...register('framework')} />
        <ArkSelect.Control>
          <ArkSelect.Trigger>
            <ArkSelect.ValueText placeholder="Select a Framework" />
            <ArkSelect.Indicator>*</ArkSelect.Indicator>
          </ArkSelect.Trigger>
          <ArkSelect.ClearTrigger>Clear</ArkSelect.ClearTrigger>
        </ArkSelect.Control>
        <ArkSelect.Positioner>
          <ArkSelect.Content>
            <ArkSelect.ItemGroup>
              <ArkSelect.ItemGroupLabel>Frameworks</ArkSelect.ItemGroupLabel>
              {collection.items.map((item) => (
                <ArkSelect.Item key={item} item={item}>
                  <ArkSelect.ItemText>{item}</ArkSelect.ItemText>
                  <ArkSelect.ItemIndicator>✓</ArkSelect.ItemIndicator>
                </ArkSelect.Item>
              ))}
            </ArkSelect.ItemGroup>
          </ArkSelect.Content>
        </ArkSelect.Positioner>
      </ArkSelect.Root>
      <button type="submit">Submit</button>
    </form>
  )
}

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/react/docs/components/select#usage-with-a-form-library

Steps to Reproduce

Copy paste the component code and observe that the default isn't set

Ark UI Version

Latest - 4.5.0

Framework

  • React