Vue-select: scrollbar collapses the dropdown when in modal (Chrome)

[folmert]

Same behavior like here.

Minimal reproduced example: github.com/folmert/vue-select-scrollbar-bug

[jwhayman]

I'm having this issue as well. When I click anywhere in the dropdown menu the onSearchBlur event is triggered and the dropdown closes. Chrome 65, v2.4.0.

[mikehodgson]

Same issue here. I had hoped @adi518 fix for #106 would fix this as well, but it does not :(

[adi518]

I'll look into it.

[korobkadima]

Hi everyone. Same issue too. Has anyone solved this problem?

[adi518]

Ok, this shouldn't be hard to fix. It's probably just a z-index issue, where the modal element has a higher z-index than v-select dropdown element. It's pretty easy to fix in that case.

[korobkadima]

@adi518 please look on example https://codepen.io/anon/pen/OEbdWx
Thanks

[adi518]

Codepen is too limited for debugging purposes.

Well, first thing I noticed now is that the Bootstrap modal z-index is 1050 and v-select is 1000.

[adi518]

Ok, it's fixed using my non-merged PR #373. This is not a z-index issue.

@mikehodgson My fix isn't merged, which is why you thought it's not fixing it.

For the time being, you can get around it by cloning my fork, however that might introduce regressions since my fork history is now behind. So, alternatively, you can create a new component called VSelectExtended.vue with the following snippet (based on [email protected]), which incorporates PR #373:

<template>
  <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
    <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">

      <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
        <slot name="selected-option" v-bind="option">
          {{ getOptionLabel(option) }}
        </slot>
        <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
          <span aria-hidden="true">&times;</span>
        </button>
      </span>

      <input
              ref="search"
              v-model="search"
              @keydown.delete="maybeDeleteValue"
              @keyup.esc="onEscape"
              @keydown.up.prevent="typeAheadUp"
              @keydown.down.prevent="typeAheadDown"
              @keydown.enter.prevent="typeAheadSelect"
              @blur="onSearchBlur"
              @focus="onSearchFocus"
              type="search"
              class="form-control"
              autocomplete="false"
              :disabled="disabled"
              :placeholder="searchPlaceholder"
              :tabindex="tabindex"
              :readonly="!searchable"
              :style="{ width: isValueEmpty ? '100%' : 'auto' }"
              :id="inputId"
              aria-label="Search for option"
      >

      <button 
        v-show="showClearButton" 
        :disabled="disabled" 
        @click="clearSelection"
        type="button" 
        class="clear" 
        title="Clear selection" 
      >
        <span aria-hidden="true">&times;</span>
      </button>

      <i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>

      <slot name="spinner">
        <div class="spinner" v-show="mutableLoading">Loading...</div>
      </slot>
    </div>

    <transition :name="transition">
      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" @mousedown="onMousedown">
        <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
          <a @mousedown.prevent.stop="select(option)">
          <slot name="option" v-bind="option">
            {{ getOptionLabel(option) }}
          </slot>
          </a>
        </li>
        <li v-if="!filteredOptions.length" class="no-options">
          <slot name="no-options">Sorry, no matching options.</slot>
        </li>
      </ul>
    </transition>
  </div>
</template>

<script>
import vSelect from 'vue-select'

export default {
  extends: vSelect,
  methods: {
    /**
     * Close the dropdown on blur.
     * @emits  {search:blur}
     * @return {void}
     */
    onSearchBlur() {
      if (this.mousedown && !this.searching) {
        this.mousedown = false
      } else {
        if (this.clearSearchOnBlur) {
          this.search = ''
        }
        this.open = false
        this.$emit('search:blur')
      }
    },
    /**
     * Event-Handler to help workaround IE11 (probably fixes 10 as well)
     * firing a `blur` event when clicking
     * the dropdown's scrollbar, causing it
     * to collapse abruptly.
     * @return {void}
     */
    onMousedown() {
      this.mousedown = true
    }
  }
}
</script>

[korobkadima]

Thanks a lot :)

[tgice]

Sorry to have to ask this, but I'm interested in the workaround for this bug presented here, in the last comment by @adi518, but I'm using vue-select in a simple way were I just load it straight into the browser via a CDN, like this:

<script src="https://unpkg.com/vue-select@latest"></script>

so I'm not sure how to implement this above suggestion for creating the new component based on vue-select.

Would that even be possible for me in the simple browser-based scenario that I describe above?

I also tried grabbing the vue-select.js file from the fork here and just pulling that in with a script tag instead of the official release from the CDN.

This seemed to exhibit the same bad behavior I've been seeing (in Firefox & Chrome, clicking on the scroll bar when the drop down is visible causes it to close immediately).

Can anyone offer a pointer to me? It seems like @korobkadima was able to implement the workaround, but I'm not quite sure how.

Sorry for my lack of understanding, just trying to wrap up my usage of vue-select in a Bootstrap modal near the end of a project.

[adi518]

For browser, you will have to do something like this:

/* global Vue, vSelect */

var VSelectExtended = Vue.extend({
  extends: vSelect,
  methods: { ... }
})

[tgice]

Thanks for the quick response, @adi518. I did what you suggested, though I did have to change

extends: vSelect, to extends: VueSelect.VueSelect,

that seemed to work as normal, then I just changed my Vue.component call like this:

Vue.component('v-select', VSelectExtended);

and continued with my normal "v-select" HTML definition. So at that point, I had no Vue component registered directly to the original vue-select, but I'm _still_ annoyingly seeing this bug in Firefox in a Boostrap (4.1.1, if that might make any difference) modal.

If I click on the scroll bar, the drop down disappears as before. Ugh. Frustrating. I don't suppose you have any other suggestion for me? I'm pretty sure I am correctly using your patch code above now and not the original, un-extended vue-select.

Either way, thanks again for your help.