dropdown list not rendering when I type in an existing value

[David Wisenbaugh]

Hello 

I am using the combobox with custom value data bound to a database. When I type in an existing value the drop down opens but it shows blank like it is not rending the data. If I click the dropdown arrow I can see the data . But when I filter it out I cannot see the data . 

this is how I have my combo box set up 

```

<template>

    <div class="control-section">

        <div id="content">

            <ejs-combobox 

                id="category"

                ref="categoryObj"

                :popupHeight="height"

                :query="query"

                :filtering="onFiltering"

                :allowFiltering="allowFiltering"

                :noRecordsTemplate="nTemplate"

                :fields="fields"

                :dataSource="data"

                :placeholder="waterMark"

                floatLabelType="Auto"

                :focus="onFocus"

                v-model="inputValue"

                :cssClass="className">

            </ejs-combobox>

        </div>

    </div>

</template>

<script>

    import Vue from 'vue'

    import { ComboBoxPlugin } from '@syncfusion/ej2-vue-dropdowns'

    import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons'

    import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'

    import axios from 'axios'

    Vue.use(ComboBoxPlugin)

    Vue.use(ButtonPlugin)

    var noVueTemplate = Vue.component('noRecordsTemplate', {

        template:

            '<div id="nodata"> No matched item, do you want to add it as new item in list? <ejs-button v-on:click.native="onclick">Add New Item</ejs-button></div>',

        data() {

            return {

                data: {},

                customValue: '',

                newItem: '',

                categoryId: ''

            }

        },

        methods: {

            onclick: function () {

                // get the typed characters

                const dropdownInstance = document.getElementById('category').ej2_instances[0]

                this.customValue = dropdownInstance.element.value

                // make new object based on typed characters

                this.newItem = {

                    CategoryName: this.customValue,

                    Id: this.customValue

                }

                const a = this.customValue

                // add new item to database.

                const formData = new FormData()

                formData.append('CategoryName', a)

                axios({

                    method: 'post',

                    url: 'https://localhost:5001/odata/Categories',

                    data: formData,

                    headers: { 'Content-Type': undefined }

                })

                    .then((response) => {

                        console.warn('Axios Response: ', response)

                        const result = response.data.Categories.filter(e => e.categoryName === a)[0]

                        // pass new object to addItem method.

                        dropdownInstance.addItem({ CategoryName: result.categoryName, Id: result.id })

                        dropdownInstance.value = result.id

                        // new object added to datasource

                        dropdownInstance.dataBind()

                        // close the popup element.

                        dropdownInstance.hidePopup()

                    })

                // select the newly added item.

            }

        }

    })

    export default {

        data: function () {

            return {

                data: new DataManager({

                    url: 'https://localhost:5001/odata',

                    adaptor: new ODataV4Adaptor(),

                    crossDomain: true

                }),

                fields: { text: 'CategoryName', value: 'Id' },

                height: '220px',

                className: 'combo-bg',

                waterMark: 'Category',

                query: new Query()

                    .from('Categories')

                    .select(['CategoryName', 'Id']).sortBy('CategoryName'),

                nTemplate: function () {

                    return {

                        template: noVueTemplate

                    }

                },

                allowFiltering: true

            }

        },

        props: {

            categoryValue: { type: [Number] },

            value: { type: [String, Number] }

        },

        computed: {

            inputValue: {

                get() {

                    return this.value

                },

                set(value) {

                    this.$emit('input', value)

                }

            }

        },

        methods: {

            onFocus: function (e) {

                var dropdownInstance = document.getElementById('category').ej2_instances[0]

                if (dropdownInstance.element.value) {

                    dropdownInstance.searchLists(e)

                }

            },

            onFiltering: function (e) {

                this.query = new Query()

                // frame the query based on search string with filter type.

                this.query =

                    e.text !== ''

                        ? this.query

                            .from('Categories')

                            .where('CategoryName', 'startswith', e.text, true)

                        : this.query

                // pass the filter data source, filter query to updateData method.

                e.updateData(this.data, this.query)

            }

        }

    }

</script>

<style>

    @import "~@syncfusion/ej2-base/styles/material.css";

    @import "~@syncfusion/ej2-inputs/styles/material.css";

    @import "~@syncfusion/ej2-vue-dropdowns/styles/material.css";

    @import "~@syncfusion/ej2-vue-buttons/styles/material.css";

    .combo-bg.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,

    .combo-bg.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after {

        background: blue;

    }

    .combo-bg.e-float-input:not(.e-error) input:focus ~ label.e-float-text {

        color: blue;

    }

    .combo-bg .e-dropdownbase .e-list-item.e-active {

        color: blue;

    }

</style>

```

I have it configured as a reusable component.

please advise what Can I do to get this to render properly.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi David, 

Thanks for contacting Syncfusion support. 

We have checked your query. Unfortunately, we could not reproduce the reported issue in our end. We have made sample for your scenario. Please find the sample in the below link. Kindly share any replication procedure or video demonstration to reproduce the issue. If possible, reproduce the reported issue in the attached sample that will help us to validate the issue further and provide you a better solution from our end. 

Sample Link       : https://codesandbox.io/s/combobox-custom-component-data-oidke 

Regards, 

Jeyanth. 

[David Wisenbaugh]

I have worked out how to get the filtering to work properly now I need one more thing answered how do i change the highlight color of the autofill and selected text from red to blue. so that it matches my page theme 

I need the css  for the textbox, and dropdown control as well. please

please advise

[Berly Christopher]

Hi David, 

  

We have prepared the sample based on the requested requirement for the ComboBox (enabled autofill option), Textbox and DropDownList component and attached it below. 

  

Sample Link: https://codesandbox.io/s/combobox-custom-component-data-forked-d3cmk  

  

Regards, 

Berly B.C