Vue multiselect template slot clear does not work

Question

i copied the code from async part of the documentation, because that's the 'X' to remove value i want.

here is my general component that i use in other vue components

<template>
    <div>
        <multiselect
            v-model="items"
            :options="filteredList"
            :multiple="multiple"
            :close-on-select="multiple ? false : true"
            :show-labels="false"
            :placeholder="placeholder"
            track-by="id"
            :label="label"
            @input="inputChanged"
            :internal-search="false"
            @search-change="searchItems"
        >
            <template slot="clear" slot-scope="props">
                <div class="multiselect__clear" v-if="items.length" @mousedown.prevent.stop="clearAll(props.search)"></div>
            </template>
        </multiselect>
    </div>
</template>

<script>
    export default {
        model: {
            prop: 'parentItems',
            event: 'change',
        },
        props: ['multiple', 'list', 'placeholder', 'label', 'parentItems'],
        data() {
            return {
                items: this.parentItems,
                filteredList: this.list,
            }
        },
        methods: {
            searchItems(query) {
                let q = latinize(query.toLowerCase().replace(/\s/g,''))
                this.filteredList = this.list.filter(li => latinize(li[this.label].toLowerCase().replace(/\s/g,'')).includes(q))
            },
            inputChanged() {
                this.$emit('change', this.items);
            },
            clearAll() {
                this.items = this.multiple ? [] : null
            },
        },
    }
</script>

everything works as desired, except the X to clear selection is never displayed.

i found the clear element in console, it has width of 255 and height of 0. i tried to put X between the div tags, like this

<template slot="clear" slot-scope="props">
    <div class="multiselect__clear" v-if="items.length" 
        @mousedown.prevent.stop="clearAll(props.search)"
    >
        X
    </div>
</template>

but it would display above the select input field. also changing the height attribute in dev console just made clear space above input field.

what am i missing?

Answer 1

Thanks to tony19 I went and inspected the part of documentation I mentioned in the question.

I found out that they use different code for the example, so to attain desired effect, I need to add following code to my css.

.multiselect__clear {
    position: absolute;
    right: 41px;
    height: 40px;
    width: 40px;
    display: block;
    cursor: pointer;
    /*z-index: 2;*/
}

.multiselect__clear:after, .multiselect__clear:before {
    content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 16px;
    background: #aaa;
    top: 12px;
    right: 4px;
    cursor: pointer;
}

.multiselect__clear:before {
    transform: rotate(45deg);
}

.multiselect__clear:after {
    transform: rotate(-45deg);
}

Answer 2

vue-multiselect does nothing special with the clear slot other than render it before the input tags. It leaves the styling and behavior/implementation entirely up to the end user.

In addition, the example from the docs you linked poorly implements the slot, as the provided slot has no contents, so the div won't be visible or clickable, making it effectively useless. Not to mention, it uses the obsolete (pre-2.6) slot syntax of Vue, which would cause warnings on the browser console if using the development build of Vue.

Solution

The clear slot should look like this:

<multiselect v-model="value"
             :options="options"
             multiple
             taggable
             @tag="addTag">
  <template v-slot:clear>
    <button v-if="value.length" class="multiselect__clear" @click="clearSelectedTags">
      Ⓧ Clear selection
    </button>
  </template>
</multiselect>

demo