Select input options being passed as field label in submissions

Support
1

I’m using Gatsby and all the fields are named correctly in submissions except for my select input. Netlify is registering the label of the select input as well as all its options as part of the name of the label.

Screen Shot 2020-02-07 at 8.54.56 am
Screen Shot 2020-02-07 at 8.54.56 am1030×184 19.9 KB

Here is my select component:

    <label
  htmlFor={name}
  sx={{
    display: "block",
  }}
>
  <span>
    {label}
    {required && "*"}
  </span>
  <select
    id={name}
    name={name}
    value={value}
    onChange={onChange}
    placeholder={placeholder}
    onBlur={() => onBlur(name, true)}
  >
    {options.map(o => (
      <option value={o.value} key={o.value}>
        {o.label}
      </option>
    ))}
  </select>
  {error && <p sx={{ color: "rainbowRed" }}>{error}</p>}
</label>

Netlify instance: https://practical-thompson-134dc2.netlify.com/

2

Hi there! I love your site - very important work you are doing!

Can you direct us toward the clear html version of the form?

3

Hi Perry!

Thanks. I’ve figured it out, for some reason having the htmlFor (react) on the label and id on the select input, caused this issue. I’m not entirely sure why.

This was the static html that was generated from Gatsby prior to the fix, and it all looks fine so unsure why it was a problem.

  <label for="stateselect" class="css-13o7eu2">
          <span class="BookWorkshop__SelectLabel-sc-15t5adi-1 jkxZVi">
            State
          </span>
          <select
            id="stateselect"
            name="state"
            class="BookWorkshop__SelectOuter-sc-15t5adi-2 lfmHtz"
          >
            <option value="ACT">ACT</option>
            <option value="New South Wales">New South Wales</option>
            <option value="Northern Territory">Northern Territory</option>
            <option value="Queensland">Queensland</option>
            <option value="South Australia">South Australia</option>
            <option value="Tasmania">Tasmania</option>
            <option value="Victoria">Victoria</option>
            <option value="Western Australia">Western Australia</option>
          </select>
        </label>
4

looks OK to me as far as I can tell. Glad it’s working now, just ping us again if you need.