Usign Initial prop to show active option

[jujogi]

Hi, thanks for amazing and useful select.

I trying to use 'initial' prop, but the option doesn't select, only shows like an option. If I click outside, the dropdown will be deactivated.

Thanks for help,
Regards

[robrogers3]

I'm trying to figure out how to handle an initial value. The initial prop is like going to Google with a search term already in place. You need to select the option you want or just click enter to select the first match. I'm thinking maybe it should be based on the v model of the parent component or instance. But that means you would have to set the value of that property. Note clicking outside will always close the drop down it has too otherwise you'd be stuck in the field. Rob Rogers robrogers@me.com

…

On Sep 24, 2018, at 8:35 AM, jujogi ***@***.***> wrote: I trying to use 'initial' prop, but the option doesn't select, only shows like an option. If I click outside, the dropdown will be deactivated. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[robrogers3]

Oh yeah do you have any suggestions ? Rob Rogers robrogers@me.com

…

On Sep 24, 2018, at 8:35 AM, jujogi ***@***.***> wrote: I trying to use 'initial' prop, but the option doesn't select, only shows like an option. If I click outside, the dropdown will be deactivated. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[anoviel]

I like to use this component in more applications.
as mentioned preselecting / databinding is a problem yet, so i tested a bit:
using

<template>
    <vue-single-select
        id="post-selector"
        v-model="post"
        :options="posts"
        placeholder="Select tribe"
        :value="post"
        :get-option-description="label"
        :get-option-value="value"
        >
    </vue-single-select>
</template>

<script>
export default {
    data() {
        return {
            post: null,
            posts: [
                {id: 1, name: "test"},
                {id: 2, name: "test2"},
                {id: 3, name: "test3"},
            ],
        }
    },
    methods: {
        label(option){
            return option.name
        },
        value(option){
            return option.id
        }
    }
}
</script>

i used props for specific label / value functions to match my needs
i had to edit your code slightly to enable preselect depending on :value prop

//VueSingleSelect.vue
data() {
    return {
      searchText: null,
      selectedOption: this.value,   //<--- edited here
      dropdownOpen: false
    };
  },

Could that be a valid solution for you?

Greetings,
Jan Radtke

[robrogers3]

can you make a pull request for this.

[gribben]

@robrogers3 This would be a very useful feature. I have tested the proposed fix above and it seems to do the trick. Can you add this?