Select component: Input inherits 'name' attribute

[dpletiko]

Select component wierd behaviour.

Setting the 'name' attribute to the Select component applies the same 'name' value to the generated Input element.

Submitting the form both select and input values are submitted.

Any reason why the input element inherits the select element 'name' attribute?

Thanks :)

Edit: (added img example) Inspect element example below:

[juujisai]

Hi! We've added this together with our validation component. We'll recheck if it's necessary.

BTW, how are you submitting the form? With vanilla JS? Using some frameworks or libraries?

[vburlak]

Hey, folks. Stuck into the same issue.

We are customizing multi-select fields in Gravity Forms and processed form data looks like:

For fields with multiple selected options:

- 2 options selected
- option_1_value
- option_2_value

and for fields with single option selected:

- Option 1 Label
- option_1_value

In both cases value of input[data-te-select-input-ref] would be prepended before exact select values in case of using the same name attribute.

UPD: Gravity Forms using Ajax Post request to send all Form fields by name into backend for validation.

[AlxndrVgt]

Same issue when using the searchable select with data-te-select-filter. Both elements, the original <select> and <input data-te-select-input-ref /> get the same name and therefore multiple and different values submitted:

<form>
  <select name="myselect" data-te-select-init data-te-select-filter="true">
    <option value="1">My value</option>
  </select>
</form>

Then reading the values from the form via JavaScript:

const form = document.querySelector('form');

for (const element of form.elements) {
  console.log(element.name + " - " + element.value);
}

This will result in the following:

myselect - My value // from <input>
myselect - 1 // from <select>

[juujisai]

Soon we are going to start working on that. We will most likely remove the name attribute