Mixed data types for select options behaving wrong

Describe the feature

It’s possible I’m just doing something wrong but I played around with it and couldn’t figure it out.

When doing a select dropdown, we can provide an array of strings, or use objects to define each option in the dropdown, like so:

<FormKit type="select" name="Country" :options="countries" placeholder="Select Country" />

The countries variable is just an array of strings. So far so good. The placeholder gives us a typical placeholder.

Now I want to add a disabled option to act as a kind of separator between certain options, how do I do this?

countries = [
    "United States",
    "Canada",
    "Mexico",
// Want to insert a separator here
    "Afghanistan",
    "Aland Islands",
]

According to the docs, we can do alternate layouts only by using the default slot. https://formkit.com/inputs/select However, I thought that I could just mix-n-match the different data forms, like this:

countries = [
    "United States",
    "Canada",
    "Mexico",
    { label: '───', value: '', attrs: {disabled: true}},
    "Afghanistan",
    "Aland Islands",
]

The thing is, this actually works, and it creates a disabled option after the first three countries as expected. The problem is, it kills the placeholder and instead the line I’ve added actually becomes the new placeholder!

You can see in this screenshot that the line really does appear in the correct spot and looks just like I want it to.

The question is, why does the placeholder get stripped out just because I added some other disabled option? And can I do what I’m trying to do here with a normal placeholder still intact? I just want the box to say “Select Country” and then have my line separate the first three.

I don’t want to use the default slot idea because then I have to figure out how to cram the entire countries list into the HTML template instead of just binding it simply with the array.

[justin-schroeder]

Agreed @guyinpv. That masking effect has messed me up more times than I can count in our current project.

@tominal we haven’t gotten any other feedback about users having trouble with this so I’d love to know more about how you were getting tripped up.

[guyinpv]

Thanks again for expanding on this. It all feels a bit random, lol.

Perhaps the only thing to do is update the documentation because it really tripped me up and I couldn’t find out why anything was behaving the way it was. The docs should explain:

1. That we can mix-n-match the list definition array with plain text and objects for various needs.
2. That the placeholder functionality of FK (set in attributes) will be overwritten if we add our own disabled fields manually.
3. How the true/false/masking stuff works.

Thanks! I suppose this issue could be closed up unless there is something to do.