Vue-multiselect: Placeholder styling

[vpratfr]

Steps to reproduce

When value is empty/null, the placeholder is shown

Expected behaviour

The placeholder style should be different from the style of a value

Actual behaviour

The span containing the placeholder has no additional CSS class, hence we cannot style it differently.

[vpratfr]

Vue code:

<vue-multiselect
                            track-by="id"
                            label="label"
                            v-model="newItem.role"
                            placeholder="Rôle du représentant légal dans la structure"
                            :options="legalRepresentativeRoles"></vue-multiselect>

Rendered in browser:

//...
<span><span class="multiselect__single">
            Rôle du représentant légal dans la structure
          </span></span>
</div> 
//...

[vpratfr]

Working code (but very verbose when you have lots of selects):

                    <vue-multiselect
                            track-by="id"
                            label="label"
                            v-model="newItem.role"
                            :options="legalRepresentativeRoles">
                        <template slot="placeholder">
                            <span class="multiselect__placeholder">Rôle du représentant légal dans la structure</span>
                        </template>
                    </vue-multiselect>

[wrabit]

Same issue. Why is this closed? Why are their remnants of a class existing "multiselect__placeholder" and it not being applied to an actual placeholder.

[vpratfr]

I did not get it either :/

[shentao]

@williamabbott please look into the source code:

        <span
          v-if="isPlaceholderVisible"
          class="multiselect__placeholder"
          @mousedown.prevent="toggle">
          <slot name="placeholder">
              {{ placeholder }}
          </slot>
        </span>

As you can see, the .multiselect__placeholder class is still there and applied. However, when the component is searchable we’re using the native placeholder of an input. I imagine the latter could be working different (ditching the native placeholder all together). A PR is welcome in this case.

[wrabit]

@shentao when I focus the multiselect, I can see it reverts to displaying the native placeholder (this is styled, as I want, as per other inputs) but in an unfocused state, it is using:

<span class="multiselect__single"> My placeholder </span>

[shentao]

Please provide a reproduction fiddle.

[wrabit]

https://jsfiddle.net/rjr8n2oc/11/

[shentao]

I will accept a PR that improves this :)

[wrabit]

I don't know about anyone else in this thread but my issue was resolved by bumping version 2.1.0 -> 2.1.3

[vpratfr]

https://github.com/shentao/vue-multiselect/pull/700 I guess

[Bencup]

Thanks, it' helpful.