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);
}