The devDependency @vue/test-utils was updated from 1.0.0-beta.29 to 1.0.0-beta.30.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@vue/test-utils is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi, it's me again!
So I want to change my cursor focus to another input with Enter key to speed up data input process.
Unfortunately, we cannot use el.nextElementSibling or el.nextSibling in BootstrapVue, since the input element placed within the <b-form-group>.
I think I can use ID to identify every input element within a form and jump from one to another input easily.
So, can you add one more props, say inputId, and pass it value to the ID attribute to the <input /> element?
Or maybe you have a better solution for this problem, let me know.
Thanks

The devDependency rollup was updated from 1.27.6 to 1.27.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi, thanks for this really nice component!
I found a little unexpected behavior here when I want to focus to this component from previous input control with Tab key. I need to stroke Tab key twice to focus and start typing on this component.

I have tested it on Chromium 73 and Firefox 66 on Ubuntu 16.04.
Thanks.

would it be possible to include an override for the autocomplete property of the input control within the component?

it is always set to "off" and can't be overridden with :input-el-custom-attributes

my testing confirms this stack overflow answer that chrome no longer respects "off" to disable autocomplete, "new-password" must be used instead https://stackoverflow.com/a/55292734

I put in a pull request to just change the hardcoded value

Good day,

I'd like to know how a styling on this amazing component works.
I'd like to remove border and border-color and border-shadow from the select box

Thanks for quick reply

Hi again, recently I updated your vue-cool-select to v. 1.5.1 and I found a cople errors.

Both errors happen when I use the disable-search prop.

In Firefox when I put two or three vue-cool-select, the second one displays drop-down options without close drop-down options at first select, see the next image.
.

In Chrome doesn't select any option, only show options and close drop-down when release clic button.

If you need more details just ask for it. Thank you a lot for your component, best regards.

Using vue-cool-select in different components
Whenever I click on the component it scrolls the page to put the component at the top.

using
"vue": "^2.5.22",
"vue-cool-select": "^1.6.2",

example of a problematic instance

 <cool-select
        v-model="userSelected"
        :items="userResults"
        :loading="searching"
         item-text="label"
         placeholder="Choose user"
        disable-filtering-by-search
         @search="onSearch">

         <template slot="no-data">{{noData ? "No Result." : "Two characters minimum." }}</template>
              <template slot="item" slot-scope="{item}">
                    <div>{{item.label}} - {{item.email}}</div>
         </template>
 </cool-select>

This is an excellent component. Thank you for making it available.
How do I customize component css?
Is this possible?

How can I select the first item in the list?

It is more practical for the user to type what he is looking for and then hit enter if the item he is looking for is the first one on the list.

Low priority - it throws errors messages in the compiler but everything still works fine.
Version 3.0.2

Specific messages are:
Parameters implicitly have 'any' type:
Line 9, 10, 11, 41 through 48
Functions lack return-type annotation, implicitly have 'any' return type:
Line 41 through 48

Thanks for this great tool.

How I can remove the selected values?
I am using ajax options and I can set selected to null again and items to [] but the entered text is always there even after setting these changes., How I can clear the text and only show the placeholder?

when you search for an item and use the down arrow and then enter it does not fire @select.

example: https://codesandbox.io/s/zwn46x1kpx

maybe it's the problem here
https://github.com/iliyaZelenko/vue-cool-select/blob/master/src/component.vue#L66

Hi
i have try to implement infinite scroll with search using this. but some how i am able to see only 20 results. but the i have lot of data .

I want to add two cool-select data filled with API on one component.

<cool-select
            v-model="selected"
            :items="items"
            :loading="loading"
            item-text="name"
            :placeholder="gettext('Enter company name')"
          
            @search="onSearch"
            style="position:relative; padding:0 0 0 0;"
          >
            <template #no-data>
              <div class="item  ">
                {{
              noData
                ? gettext('No company found.')
                : gettext('Type at least 3 letters to search.')
            }}
              </div>
            </template>
            <template #item="{ item }">
              <div class="item">
                <span class="item-name"> {{ item.name }} </span>
              </div>
            </template>
          </cool-select>
          <cool-select
            v-model="selected2"
            :items="items"
            :loading="loading"
            item-text="name"
            :placeholder="gettext('Enter company name')"
            :search-text.sync="search"
            @search="onSearch"
            style="position:relative; padding:0 0 0 0;"
          >
            <template #no-data>
              <div class="item  ">
                {{
              noData
                ? gettext('No company found.')
                : gettext('Type at least 3 letters to search.')
            }}
              </div>
            </template>
            <template #item="{ item }">
              <div class="item">
                <span class="item-name"> {{ item.name }} </span>
              </div>
            </template>
          </cool-select>

Hi, it's me again.
So I create separated component to simplify the input of a field in a table, and include that component to my form. And add v-model support to that component.
But sometime we need to edit a row using the same form. As usual, an edit form will contain the initial value from a database. But I found that I am unable to set an initial value for this component.
Here is the code I use:

CodeSanbox

Can we have a solution for this problem?
CMIIW
Thanks

just installed this component and it works great, so thanks for that. One thing i did notice is that if you're using the item slot setup (with images) when the dropdown disappears, the images stay visible a split second longer than the actual dropdown. doesn't effect functionality, just looks a bit odd when it's disappearing.

When I have a select on the bottom of my page, the dropdown menu increases the page height instead of displaying it above the input. See the gif below for a quick example:

Is there a simple solution for this to apply myself, or does it require editing the package?

Thanks for this amazing package, there is currently no better one!

Hello people,

When I use keyboard arrow keys to select items, the roller can't scroll to the right position.

And I got the solution, but it will be great if someone can help me to fix this bug.
Thanks.

<template>
    <div :class="className">
        <CoolSelect @search="onSearch"
                    @select="select($event)"
                    @blur="blur"
                    @keyup="moveScroll($event)"
                    :items="items"
                    :item-text="itemText"
                    :item-value="itemValue"
                    :placeholder="placeholder"
                    :ref="relName"
                    disable-filtering-by-search
        >

            <template slot="no-data">
                <slot name="c-no-data"></slot>
            </template>

            <template slot="item" slot-scope="{ item }">
                <slot name="c-item" v-bind:item="item"></slot>
            </template>

        </CoolSelect>
    </div>
</template>

<script>
    import { CoolSelect } from 'vue-cool-select';

    export default {
        props: {
            className: {
                type: String,
                default: 'cool-select-c'
            },
            search: {
                type: Function,
                default: function() {}
            },
            select: {
                type: Function,
                default($event) {}
            },
            blur: {
                type: Function,
                default: function() {}
            },
            items: {
                type: Array,
                default: []
            },
            searchText: {
                type: String,
                default: ''
            },
            itemText: {
                type: String,
                default: 'name'
            },
            itemValue: {
                type: String,
                default: 'name'
            },
            placeholder: {
                type: String,
                default: ''
            },
            maxHeight: {
                type: Number,
                default: 300
            },
        },
        components: {
            CoolSelect,
        },
        data() {
            return {
                relName: 'cSelect',
                keyDownCount: 0,
            };
        },
        watch: {
            searchText: function (newValue, oldValue) {
                this.$refs['cSelect'].setSearchData(newValue);
                return newValue;
            },
        },
        methods: {
            moveScroll(event) {
                if (this.items.length > 0 && ((event.keyCode === 40) || (event.keyCode === 38))) {
                    this.keyDownCount = (event.keyCode === 40) ? ++this.keyDownCount : this.keyDownCount;
                    this.keyDownCount = (event.keyCode === 38) ? --this.keyDownCount : this.keyDownCount;

                    this.keyDownCount = (this.keyDownCount > this.items.length) ? 1 : this.keyDownCount;
                    this.keyDownCount = (this.keyDownCount === 0) ? this.items.length : this.keyDownCount;

                    console.log(this.keyDownCount);
                    if ((this.keyDownCount >= 10) && (this.keyDownCount <= this.items.length)) {
                        this.$refs[this.relName].$el.querySelector('.IZ-select__menu--at-bottom .IZ-select__menu-items').scrollTop += this.maxHeight;
                        this.$refs[this.relName].$el.querySelector('.IZ-select__menu--at-top .IZ-select__menu-items').scrollTop += this.maxHeight;

                    } else {
                        this.$refs[this.relName].$el.querySelector('.IZ-select__menu--at-bottom .IZ-select__menu-items').scrollTop = 0;
                        this.$refs[this.relName].$el.querySelector('.IZ-select__menu--at-top .IZ-select__menu-items').scrollTop = 0;
                    }
                }
            },
            onSearch(search) {
                this.keyDownCount = 0;
                this.search(search);
            }
        }
    }
</script>

Our list has many technical words that produce red spellchecker underlines on the text input. Would it be possible to add an option that puts spellcheck="false" onto the input element? As we have no way of disabling this from our side right now.

I am using this control on following the examles but there's no style :(

Can you help me? thanks!

The devDependency @vue/cli-service was updated from 3.5.2 to 3.5.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@vue/cli-service is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I want to force the user to make a choice from the list. It's that possible?

How can i display a default value or a pre-selected value?

When I press the enter key to select an item the form gets submitted, this differs from the behaviour of the built in browser select. Is there a way to change this behaviour? Maybe block this event from getting through somehow.

Thanks, great component!

I have a question. I need it so when the user enters the page the dropdown menu is open.
I haven't found any props for this. I don't know if I need to make a focus manually. Can this be done?

Support CDN usage ？

Error message: template or render function not defined.

import VueCoolInput from 'vue-cool-select';

Vue.use(VueCoolInput);

Vue.component('cool-input', VueCoolInput);

This is a great component, thanks.
Is there a way to disable the cool-select on mobile? So that a dropdown reverts to default mobile behavior, rather than the cool-select component.

Our application has Content Security Policies that doesn't allow dynamically defining functions.

Recently added async modifier to the showMenu function causes the inclussion of the regenerator polyfill by rollup. In this package there is a function that is dynamic

Issue #190 explains a workaround by using input-el-custom-attributes. I think required is simple/common enough that it deserves its own prop. Thoughts?

Proposed usage:

<CoolSelect required />

Versus the current:

<CoolSelect input-el-custom-attributes="{required:true}" />

Hello I probably encountered an issue with your getItemValue function:

    getItemValue (item) {
      if (!item) return null
      if (this.itemValue) return item[this.itemValue]
      if (isObject(item)) {
        const keys = Object.keys(item)
        if (keys.length === 1) {
          return item[keys[0]]
        }
        return item
      }
      return item
    },

the first line is prone to errors in case the "0" (zero) is passed. suggest to change this to lodash isNil check

Hi,

Im using the version : "vue-cool-select": "^3.5.1"

How to make the search box act like a normal text field, even if we didn't select any search list option.

Currently when you click outside the search box the text entered in the field is getting reset.

When searching and it shows more than one item but not all items, it resets items to initial list when using arrow keys.
Cant not be replicated in 1.5.5.

Firstly - great work on this.

I have a small problem on mobile devices and mobile responsive view in the browser.

My cool-select is quite far down on a large form. When I focus on the select component, or start typing, it causes the browser to scroll to the top of the page.

<div class="col-6">
<cool-select
                      v-model="form.chosen_dog"
                      :items="animals"
                      itemText="name"
                      itemValue="id"
                    >
                      <template slot="selection" slot-scope="{ item: animal }">
                        <div class="d-flex flex-row">
                          <img :src="animal.image" :alt="animal.name" width="30" height="30" 
                          class="mr-3" />
                          <span>{{ animal.name }}</span>
                        </div>
                      </template>

                      <template slot="item" slot-scope="{ item: animal }">
                        <div class="d-flex flex-row justify-content-between">
                          <span>{{ animal.name }}</span>
                          <img :src="animal.image" :alt="animal.name" width="30" height="30" class="align-self-end" />
                        </div>
                      </template>
                    </cool-select>
</div>

UPDATE:

It seems to happen when using the 'bootstrap' theme and the component is inside bootstrap's col-xx elements.

See this Codesandbox for modified version of the demo that shows the issue. Make sure you view it on a phone or in responsive mode on desktop browser: https://codesandbox.io/s/81zro028z2

Would you consider adding a new position prop to change the select position depending on the current scroll position?

Maybe something like this:

position: [ 'auto', 'above', 'below' ]

Thank your for this plugin.

would it be possible to include an option to use built in html 5 input required property to control validation rather than using the combination of successful and error-message

When I use the prop 'disableFilteringBySearch' the input still launches on-screen keyboard on focus in mobile devices.

Maybe a prop to use de attribute 'readonly' like suggest in this post: https://stackoverflow.com/a/39387083

Great job on this component, very useful. Many thanks.

I am getting the above vue warning as soon as I type in a set of characters that produce no data from my data set. I assume this is something to do with my local dev installation as the demo works perfectly. I assume that the problem is that $coolSelect is not available, i.e. from component.vue

<slot name="no-data"> {{ $coolSelect.options.text.noData }} </slot>

and $coolSelect is imported from main.js

For some reason I get a console warning rather than the 'No data available' message. No error is thrown so the application continues OK.

I tried installing with yarn and npm but it made no difference. Do you have any idea what I have done wrong?

The devDependency core-js was updated from 3.4.6 to 3.4.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

core-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

On REST API example if you add arrows-disable-instant-selection you can see that the selected item was not followed if you navigate with arrows

I can not get the selected value inside the onSelected method, how do I get it?

example:

https://codesandbox.io/s/zwn46x1kpx

A strange error appears. Everything works, but the error still appears.

При таком сравнении, не получится сравнивать с объектами, а значит и установить начальное значение, при использовании объектов.

v3.5.1

In the following examples I have a cool-select inside a dropdown component. This dropdown component should be kept open until the user clicks outside of it, or the trigger button itself. It shouldn't dismiss when a user still clicks inside (for ex. an Apply button) the dropdown component. As you can see in the Chrome example is how it is supposed to work.

Hello,
Is it possible to make options disabled, so the user can't click them? Like the "disabled" attribute for options in a html select.
We'd like to show the availability of tickets in the cool-select. Sold out options should not be selectable but still be visible. Right now we added a css class to the option text to show it in a different color, but it would be really nice if we could disable these options entirely to prevent the user from selecting them.

Great component btw :)

I need each selected item to be added to a list, but when I remove the item from the list it keeps the deleted item.

follow the example: https://github.com/danieldocki/vue-select-by-list

Loving the component so far, and using it on my current project. However, there is a feature that I would like you to add and that seems fit for this component. It would be great to have a prop to invoke blur after selecting an item, or to be able to emit blur inside the select event.

I tried doing this by emitting blur inside the select event handler as in
onSelect (item) { console.log('select', this.$refs.coolselect) this.$refs.coolselect.$emit('blur'); }

also tried
onSelect (item) { this.$refs.coolselect.wishShowMenu = false; this.$refs.coolselect.focused = false; }

however niether work, also tried setting a timeout, that doesn't work either. If you have another option that I could try, please let me know. I did not try emitting blur outside the onSelect listener but I believe that I should be allowed to blur it inside.

the component is awesome I hope that you'll add this feature soon

Hello and thanks for the cool select,

but i was wondering if is there a way to give the select a json array like this :
[{"first_name":"lati"},{"first_name":"wassel"} ... ]

Or do i have to parse it (JSON.parse) before ?