Combobox Filtering Issue

[jovaughn]

The last example on this page breaks if you attempt to open it after a filtering and removing the filter.

the filter object is undefined

https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/events/filtering

After fixing this issue I get an unresponsive combobox the first time after the combobox is cleared and it loses focus.

I would like the combobox to only filter when at least 3 letters are entered, and open each time the user clicks regardless of if there is any data.

The combobox:

<kendo-combobox for="PersonId"
                                    filter="Kendo.Mvc.UI.FilterType.Contains"
                                    clear-button="true"
                                    placeholder="Search Name of Person"
                                    enforce-min-length="true"
                                    datatextfield="Name"
                                    datavaluefield="PrimaryId"
                                    min-length="3"
                                    suggest="true"
                                    class="w-100"
                                    on-filtering="CancelEmptyFilter"
                                    auto-bind="false">
                        <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" server-paging="true" server-filtering="true" on-request-end="DataSourceError" page-size="100">
                            <transport>
                             </transport>
                        </datasource>
                    </kendo-combobox>

The JS function:

function CancelEmptyFilter(e) {
        console.log(e);
        if (!e.filter || !e.filter.value) {
            e.preventDefault();
            return;
        }
    }

Video Below

[Petar]

Hi, Jovaughn,

Here is a modified Dojo demonstrating how the desired functionality can be achieved. 

Please check the Dojo example and let me know if it resolves the issue on your side or if you have any questions regarding the proposed implementation. Also, if you need assistance for implementing the Dojo code in UI for ASP.NET Core context I will be happy to help you.

Regards,
Petar
Progress Telerik

[jovaughn]

My issue wasn't figuring out how to stop the console error.

My issue can be seen at about 10 seconds into the gifs posted.

Steps

1. Type in 3 letters to start filter.
2. Clear Combobox
3. Focus/click anywhere on page except the combobox
4. Attempt to open the empty combobox by using the error.
5. First click is ignored.
6. Second click opens combobox as expected.

Step 5 is the issue i am having. The expected behavior is the combobox should open anytime the arrow is clicked regardless of having input or any data to show.

[Petar]

Hi Jovaughn,

I can see that there is an issue in the sent video. Without being able to reproduce the case, I cannot say what is triggering the demonstrated behavior. 

Send me a runnable project in which this issue is reproducible and I will further investigate what is the reason for it.

Regards,
Petar
Progress Telerik

[jovaughn]

https://dojo.telerik.com/ILuziJul/5-steps are the same as above

Seems like the problem is the e.preventDefault(). It prevents the dropdown from opening when there is no filter or filtervalue.

I would expect the dropdown to always open when it is clicked. One workaround is to simply fire the open method during this.

Is there a correct or better way to get the combobox to open when e.preventDefault() is called?

[Petar]

Hi Jovaughn,

Yes, it is the e.preventDefault() method that blocks the dropdown opening.

If you want to have the ComboBox opened on the first click after the e.preventDefault call, you will have to use its open method as you suggested.

Regards,
Petar
Progress Telerik