This is a migrated thread and some comments may be shown as answers.

How to disable Auto-selecting suggested item in list

5 Answers 497 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Deane
Top achievements
Rank 1
Deane asked on 16 Jan 2017, 07:22 PM

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

5 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 17 Jan 2017, 07:32 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Deane
Top achievements
Rank 1
answered on 17 Jan 2017, 07:59 PM

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?

0
Eduardo Serra
Telerik team
answered on 18 Jan 2017, 03:54 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Deane
Top achievements
Rank 1
answered on 18 Jan 2017, 05:35 PM

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.

 

0
Eduardo Serra
Telerik team
answered on 19 Jan 2017, 04:39 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Deane
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
Deane
Top achievements
Rank 1
Share this question
or