[BUG] - Autocomplete component return the Label instead the Value

[GVALFER]

NextUI Version

Latest

Describe the bug

On component, the value received is the Label instead the value. I guess its a BUG or not? It should log the value, not the label

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

const animals = [
    { label: "Big Cat", value: "cat"},
    { label: "Big Dog", value: "dog"}
];

const handleSubmit = (values) => {
    const name = values.get("animal");
    console.log(name); // Big Cat
}

<form action={handleSubmit}>     
   <Autocomplete
      name="animal"
      label="Favorite Animal" 
      defaultItems={animals}
      defaultSelectedKey="cat"
  >
      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
  </Autocomplete>

  <Button type="submit">Submit</Button>
</form>

Expected behavior

As normal, it should be returned the value and not the label

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Edge

[linear[bot]]

ENG-1067 [BUG] - Select component return the Label instead the Value

[devconstrib]

Yo tengo exactamente el mismo problema con los Autocomplete creo que no se presta intención porque esta en español :(

[devconstrib]

https://github.com/nextui-org/nextui/issues/3343#issue-2378476447 Te dejo mi caso es similar el unico detalle esque yo saco los datos de una api al final es casi lo mismo

[MohammadHarish52]

"defaultSelectedKey" might have the value of "cat" hence it might return the label causing this issue

modify the handler like this

[MohammadHarish52]

"defaultSelectedKey" might have the value of "cat" hence it might return the label causing this issue

modify the handler like this

const animals = [ { label: "Big Cat", value: "cat" }, { label: "Big Dog", value: "dog" } ];

const handleSubmit = (event) => { event.preventDefault(); const selectedLabel = new FormData(event.target).get("animal"); const selectedAnimal = animals.find(animal => animal.label === selectedLabel); const name = selectedAnimal ? selectedAnimal.value : null; console.log(name); // Should log "cat" if "Big Cat" is selected }

{(item) => {item.label}} Submit

[GVALFER]

I used the onChange function to get the key and returned it as a state (controlled). However, this is annoying. The problem is that it’s supposed to be a select, but it is an input, which causes confusion. Maybe they should create a select with search and not an input. Both makes sense and serve different cases.

[devconstrib]

No comprendo porque se complica tanto el hecho de obtener un valor desde una Autocomplete cuando en todos los lenguajes siempre se tienen dos atributos el label y value. Donde el value siempre va ser el id