Skip to content

"multiple" select elements with single defaultValue are dirty on first render #758

Open
@njdancer

Description

@njdancer

Describe the bug and the expected behavior

I have a problem related to #577, with select elements that have the multiple attribute set and only a single value as default. With multiple set, defaultValue has to be an array, even if it will only contain one value. When the FormData is created off this input though, if only one item is selected, then the value will be a single string and will only become an array if multiple values have been selected. This results in the value on initial render being a string despite the defaultValue being an array resulting in the field immediately being considered dirty upon first render.

Is there a way to force the value to be coerced back into an array by conform?

Conform version

1.1.5

Steps to Reproduce the Bug or Issue

  • Create a form with a select element that has multiple set
  • Provide an array with single item as defaultValue for select field
  • Upon first render field and consequently form will be marked dirty

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

No response

Additional context

Coercing the defaultValue to a string when it has only 1 element resolves this issue, however react no longer correctly sets the defaultValue on the select element and the UI becomes out of sync, displaying no values set. I presume this will ultimately result in the value being unavailable on submit.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions