The roller can't scroll to the right position when use keyboard arrow keys to select items

[lilashih]

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>

[iliyaZelenko]

Hi, Lila.

This is a really good suggestion for improvement. Thanks for the code provided, this will help a lot. In the future I will definitely do this as I find the time.