Firs options from list is selected.

[ipetrov87]

Describe the bug I made a computed property that contains the options that are listed. Initially I have only one option that is "-- Select --" with null value. Then I made a AJAX request to get all possible options (countries) from the database and load them in the state. After that the computed property contains all possible options.

Then when I click on the field the firs option is highlighted even it is not the one that is selected. This way when I press tab to go to the next field, the value is updated to highlighted option. This happens even I just go over the field without searching or press arrow down key.

I noticed that the first options is selected because the typeAheadPointer = 0.

To Reproduce

1. Template code

<template>
<v-select
    :options="this.countries"
    :reduce="country => country.value"
    v-model="customer.pass_issue_country_id"
    :select-on-tab="true"
    :clearable="false"
    label="text"
>
</v-select>
</template>

2. Computed variable code:

computed: {
    countries () {
        let countries = [];

        if (this.country.status == 'loaded') {
            for (let country of this.country.items) {
                countries.push({
                    value: country.id,
                    text: country.name,
                });
            }
         }

         return this.$root.addZeroOption(countries);
    },
},

3. Pres tab to focus the field.
4. Press tab to exit/focus next field.
5. Value is updated.

Expected behavior I expect when the field is focused nothing to be highlighted, until I pres down arrow key or start typing. So when I just go over the field with tab key, to not change the value.

Screenshots Just focus on the field and first option is selected.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 83.0.4103.106 (Official Build) (64-bit)

[sagalbot]

Can you reproduce this in a codepen or jsbin? This is not the default behaviour I see on https://vue-select.org/

[Vinoth-LearningThings]

@sagalbot As @ipetrov87 mentioned the auto focus issue is happening when we fill the options dynamically via ajax call. The example mentioned in https://vue-select.org/ populate static options.

[lukeholder]

Duplicate of https://github.com/sagalbot/vue-select/issues/1154 ?

[theodinspire]

@sagalbot I was able to recreate this with this codepen

To clarify the process to get to it:

1. Select the component
2. Type in a couple letters.
3. Use arrow keys to select a value.
4. Press 'Enter'
5. Press 'Tab'