clarify behavior of Picker placeholder inside a native <form>

[stefanprobst]

placing a Picker inside a native <form> element will submit the first option, even when no option has been selected and the placeholder text is still visible. this is sort of in line with native <select> behavior which does not have placeholder, but i'm not sure if this is intended behavior or not?

both Picker and select will submit "blue" here:

import {
  Provider,
  defaultTheme,
  Picker,
  Item,
  Button,
} from "@adobe/react-spectrum";

export default function App() {
  function onSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    alert(JSON.stringify(Object.fromEntries(formData), null, 2));
  }

  return (
    <Provider theme={defaultTheme} locale="en">
      <main>
        <form onSubmit={onSubmit}>
          <Picker label="Color" name="color">
            <Item key="blue">Blue</Item>
            <Item key="red">Red</Item>
            <Item key="green">Green</Item>
          </Picker>
          <div>
            <Button type="submit">Submit</Button>
          </div>
        </form>
        <hr />
        <form onSubmit={onSubmit}>
          <label>
            <span>Color</span>
            <select name="color">
              <option value="blue">Blue</option>
              <option value="red">Red</option>
              <option value="green">Green</option>
            </select>
          </label>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </main>
    </Provider>
  );
}

[LFDanLu]

I wonder if this is due to the HiddenSelect that Picker uses, perhaps it should have a "no option selected" item as its default. Will need to dig

[devongovett]

That sounds correct to me. We should add an empty option to the hidden native select when nothing is selected. Would one of you like to open an issue for that?

[LFDanLu]

Yeah I'll open one