Dropdown will not close when put inside label [Bug]

[beattyml1]

When a dropdown is put inside of label element the dropdown will close for fraction of a second and then immediately reopen.

I have reproduced in the dev.html plan and plan to work on a fix sometime over the next few weeks and issue a pull request. Feel free to just assign the issue to me.

Long pressing will close it since it will retrigger blur onmouseup in an the element below the dropdown

[ThomHurks]

Maybe I'm having the same issue, with Vue-Select 2.5.0 my multiple selects refuse to close after opening. You can get them to close by selecting a value, but not by clicking anywhere else on the page or by clicking the caret to close it. Very odd. With 2.4 everything works fine. Tried to debug it and create a minimal reproduction case but didn't succeed yet.

[sagalbot]

Hmm.. can't seem to duplicate. Let me know if you find any specifics, definitely want to get that fixed asap if it's a bug within the vue-select codebase.

[ThomHurks]

@sagalbot This is what I get. Also note that the values in the dropdown list are not selected, even though the labels are present in the input. I get no errors or warnings in the console. In fact, I only now noticed that Austria is selected twice! That shouldn't be possible...

[sagalbot]

Yikes @ThomHurks, quite a few issues there.. I'll check the diffs between 2.4 and 2.5 today and see if I can dig up anything that might be related to this. Is there any way you could provide a contrived example (markup, options array)?

[ThomHurks]

@sagalbot I tried if I could solve the duplication problem by setting the "index" property to "id" which is a unique number in my option objects, but then the result is that when I open a previously-saved form, the values that are already present are objects in the "value" array and extra values that I add are added as just the numbers. So then I have mixed objects and numbers in the value array, which is probably not nice.

When not using the "index" property, I think the duplicates are because it's using object equality or something else goes wrong during option comparison, and my options and value arrays are of course different, so the objects are not equal even though the contents are the same and so it thinks the option is not already added.

I tried creating a repro case yesterday but failed, I will try some more.

[ThomHurks]

@sagalbot The issue with the duplicate options and some of the selected options not being grey in the dropdown list is already something I can duplicate with this codepen: https://codepen.io/anon/pen/jvLxXv

The weird opening/closing issue I cannot repro yet, will work on that later.

[sagalbot]

Thanks for the help @ThomHurks, appreciate it. I was able to reproduce tonight as well:

Must be an issue with isOptionSelected. I'll get a PR going.

[ThomHurks]

Great! 👍

[ThomHurks]

I have narrowed the "not opening/closing" issue some more, it only happens to me with controls that have some initially loaded values. If the controls are empty when loading them then everything is fine.

While debugging I can see that when I click it does enter toggleDropdown() but e.target === this.$refs.openIndicator seems to be false even though I can see that e.target is the i.openIndicator element. Or maybe the call to blur() fails? Very strange.

Edit:
Wait, the blur() call of course blurs the search input, but it doesn't close the dropdown at all. If the onSearchBlur() callback is called (if) but this.mousedown && !this.searching is true (it is) then this.open is not set to false and the dropdown never closes. In fact this.mousedown is used in several placed but it's never declared anywhere. The variable doesn't even exist when I inspect the Vue component.

[beattyml1]

@sagalbot @ThomHurks my issue was only when clicking an option, clicking outside closed it fine.

This was my reproduction code sorry I didn't keep up with this thread

<label>
            Labeled
            <v-select :options="fuseSearchOptions" label="title"  v-model="someValue">
                <template slot="option" slot-scope="option">
                    <strong>{{ option.title }}</strong><br>
                    <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
                </template>
            </v-select>
        </label>
    </div>

someValue: []

[beattyml1]

Also worth noting that my issue is present in both master and 2.4.0

[sagalbot]

@ThomHurks thanks for digging! If I recall correctly, this.mousedown was added to fix a longstanding IE bug where clicking the scrollbar would close the component. Hoping to take a look at a patch this weekend.

@beattyml1 thanks for posting!

[nexorianus]

bug still presists.

[greggilbert]

For what it's worth, I can reproduce this in 3.4.0.

[sagalbot]

https://codepen.io/sagalbot/pen/wvarNjP?editors=1010

@greggilbert can you reproduce? ☝️ seems to work

[CHEWX]

I'm also getting this issue in 3.10.3

[CHEWX]

Looks like if you do .vs__selected + .vs__search { display: none; } it kills the close. But then how do you show placeholder on first load?

.vs__selected + .vs__search { width: 0; } Fixed my issue, but it's a horrible hack!

[borovez]

I am getting this issue also on 3.10.3...

<label class="block mb-5">
              <div class="mb-3 text-sm font-bold">Location:</div>
              <v-select
                v-model="tab.locationId"
                class="select"
                :reduce="label => label.value"
                @input="saveParams();"
                :options="locations"
                :clearable="false"
                :filterable="false"
                :searchable="false"
                autocomplete="disabled">
                </v-select>
</label>

I have tried @CHEWX suggestion, however I still cannot get it to work:

[abaldwin88]

This issue may be related to #1282