Drop-down issue

[moertchen]

Hi there,

I have an issue with drop-down items loosing focus. It is really difficult to get an item clicked. The drop-down is having an opacity that I was not able to change. The th/td- elements are shown on the same layer as the drop-down items. I think the behavior could have something to do with the fact that the multiselect tag is placed in a b-th of a b-table.

My vue js code looks like this:

` <b-table

        ref="table"
        :class="[extraSmall ? 'extra-small': '']"
        :key="tableKey"
        :primary-key="primaryKey"
        :items="useProvider === true ? provider : this.filtered"
        :fields="allFields"
        :per-page="disablePagination ? null : pagination.perPage"
        :current-page="disablePagination ? null : currentPage"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sorting.sortDesc"
        :filter="filterVal"
        :filter-included-fields="filter.filterOn"
        :empty-text="$t('noRecords')"
        @filtered="onFiltered"
        :busy="useProvider === true ? busy : isBusy"
        striped
        :hover="hover"
        show-empty
        :stacked="stacked"
        :small="extraSmall ? false: true"
        :responsive=true
        :bordered="bordered"
    >
        <template v-slot:top-row="data">
            <b-th v-if="hasFilters(allFields)" v-for="field in allFields" :key="field.key">
                <multiselect
                    :ref="'thead-'+field.key"
                    v-if="field.filterOptions && (field.filterOptions.type==='multiselect' || field.filterOptions.type==='singleselect')"
                    v-model="filterValColumns[field.key]"
                    :multiple="field.filterOptions.type ==='multiselect' ? true : false"
                    :options="useProvider === true ? (providerOptions[getFieldKey(field)] || []) : getMultiselectOptions(field)"
                    :placeholder="field.label"
                    :show-labels="false"
                >
                </multiselect>

`

And my package.json versions are:

    "vue": "^2.7.14",
"vue-multiselect": "^2.1.7",
"bootstrap": "^4.6.2",
  "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-multiselect": "0.9.13-1",
    "bootstrap-vue": "^2.23.0",

I would be very thankful for any help!

[mattelen]

@moertchen if you are still having this issue, could you reproduce this issue in a isolated environment like in jsfiddle (https://jsfiddle.net/mattelen/8cyt3hrn/5/) - this makes it easier to figure out where in the multiselect code the issue could be