How to disable Auto-selecting suggested item in list

[Deane]

Hello,

I have a combobox with 4 items and I would like to allow the user to either select an item from the list, or enter a new item free-form. However, if the user enters free-form input that is matched by the filter and presses Enter, then that matching item is automatically selected rather than the text they entered.

For instance, if my list is ["Fred", "Wilma", "Pebbles", "Dino"], and the user types "fr" then presses Enter, then "Fred" is selected automatically instead of "fr". See this fiddle: http://jsfiddle.net/gVWBf/

I tried "suggest: false" but this does not seem to do what I hoped.

Thanks in advance,

Deane

[Eduardo Serra]

Hello Deane,

For preventing this behavior from happening in the Kendo UI ComboBox, we can take advantage of the highlightFirst property; you can read more about it here.

I prepared a sample in the Kendo UI Dojo because the ComboBox in the documentation wasn't working correctly; take a look at it here. Notice how the first ComboBox doesn't highlight the first option while the second one does.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress

[Deane]

Thanks very much Eduardo! That works!

However, it seems that if filter: "none" is used the suggest and highlightFirst options are ignored. Is that true?

[Eduardo Serra]

Hello Deane,

In the Kendo UI ComboBox API we can see that the filter property accepts three values, startswith, endswith, and contains; none is not one of the options.

What would you like to achieve in terms of setting the filter to none?

Regards,
Eduardo Serra
Telerik by Progress

[Deane]

Thanks again Eduardo.

From the docs, filter "none" is the default. In this mode, as the user types, it appears that the item list scrolls to match the user's characters which is great. However, it still suggests the first matching item.

So, in your dojo example, I changed the config to:

$("#fabric").kendoComboBox({
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
                        //filter: "contains",
                        suggest: false,
                        index: 3,
                        highlightFirst: false
                    });

When I runs this dojo, and type "co" as my fabric choice and press Return, "Cotton" is automatically selected, even though my goal is to allow users to enter free-form entries that may or may not be in the list of items.

 

[Eduardo Serra]

Hello Deane,

Your description of what happens is accurate, when ]I modify the Dojo with the code you sent it doesn't work as expected; I'm going to find out what might be going on.

In the interest of helping you achieve your final goal as fast as possible, which "is to allow users to enter free-form entries that may or may not be in the list of items", the Dojo I sent originally does that. Is there something that you're missing by not setting the filter to contain?

Thank you for pointing out this seemingly contradicting properties.

Regards,
Eduardo Serra
Telerik by Progress