A select list with multiple="false" causes the placeholder to not render

[garylake]

Reproduction

https://formkit.link/c0040d42ed1e3475b3800cf0c39aea07

Describe the bug

When a select input is set to :validation="required" and it appears to have an option selected in both its open and closed states, if you proceed to not change/choose another option and click out, it fails validation despite it appearing to have a value selected as the user.

I've found this issue present in the Tailwind theme demo, as well as my own project. So, I've just created and attached a playground which is the Tailwind theme demo stripped back to just the select input.

Steps to reproduce:

1. Load the playground
2. Click the select input
3. Don't change the selected option from "I like Tailwind"
4. Click out of the select to close and click off again to lose focus
5. Select input fails validation

Expected outcome:

1. Click the select input
2. Don't change the selected option from "I like Tailwind"
3. Click out of the select to close and click off again to lose focus
4. Select input passes validation because "I like Tailwind" was selected anyway

Evidence:

Onload:

Open select:

Click away to close select:

Click away again to blur:

Environment

• OS: MacOS 11.1
• Browser: Chrome
• Version: 99.0.4844.51

[justin-schroeder]

Oh interesting. this is a bug, but not what it seems like — the issue is the :multiple="false" attribute, which is currently set to false, is causing the placeholder to not render, which then is making your first item the placeholder (incorrectly). There's a bug to fix here though.

In the meantime you can just return undefined instead: https://formkit.link/20ac53cdf262883a6768bf805537b002