Vue-select: Placeholder missing when not searchable

[bformet]

I just found out that the placeholder is not displayed when v-select has :searchable="false"

[ghost]

I had the same problem.
Its because the input field with the placeholder is set to max-width: 1px when searchable is false.

Heres a simple temporary fix:

.v-select.unsearchable input[type="search"] {
    max-width: none;
}
.v-select.unsearchable > .dropdown-toggle > .selected-tag + input[type="search"] {
    max-width: 1px;
}

[wa05]

Hi @ama-gi what version are you using? not working in "^2.2.0"

[edhofmtx]

Hi @ama-gi , already tried your solution but still can't see placeholder.
Any idea why?
I'm using v2.2.0

[sagalbot]

No placeholder when searchable is false

[andremiguelaa]

@wa05 include opacity: 1

.v-select.unsearchable input[type="search"] { max-width: none; opacity: 1; } .v-select.unsearchable > .dropdown-toggle > .selected-tag + input[type="search"] { max-width: 1px; }

[cloutzakis]

@andremiguelaa I would add opacity:1 !important since in my case it was overwritten.

.v-select.unsearchable input[type="search"] { max-width: none; opacity: 1 !important; } .v-select.unsearchable > .dropdown-toggle > .selected-tag + input[type="search"] { max-width: 1px; }

Apart from that it works like a charm!

[agm1984]

In the newest version of the library, there is no max-width setting on .v-select.unsearchable input[type="search"], so I changed opacity: 0; to opacity: 1; and it fixed this problem.

[sagalbot]

Fixed in v2.6.4.