Ambiguous selected item is confusing for the user

[Shane Milton]

With the Combobox, imagine if we had the following dataset where the Value is an Account ID and the Text is an Account Number:

(Value, Text)
(1, 312)
(2, 553)
(3, 923)
(4, 2)
(5, 234)

If the user types in "2" to select the account with ID=4, what we actually get back bound to our model is ID=2 rather than them typing the text for the item with ID=4.

How do we properly handle a scenario where there are collisions with display text and the values?

-Shane

[Shane Milton]

Another ambiguous scenario (which is easily reproducible on your demo pages):

1. Go here.
2. Click in the top combobox.
3. Type, without quotes, "Chai". (This matches perfectly with what's in the list.)
4. Hit [TAB]
5. Notice that the event log shows ComboBox OnChange :: value = Chai.
6. Now go back and click on the down arrow to open the combobox with the mouse.
7. Click  on the "Chai" listing. Notice that the event log shows ComboBox OnChange :: value = 1.

Is there any way that we can "force" the value to be set to the ID? I have tried with AutoFill and HighlightFirstMatch and neither give this behavior. In fact, AutoFill(true) almost makes this a HUGE problem since you can simply type "C" and hit [TAB] and you now see "Chai" even though that doesn't really select the item in the list.

-Shane

[Shane Milton]

So I've got a "good enough" solution for us. This works best when you set both AutoFill(true) and HighlightFirstMatch(true). This is for a combobox with .Name("SelectedAccount"). I STRONGLY encourage anybody using this version of the combobox to implement this for any/all comboboxes that they use until Telerik improves this functionality. We're pushing this to production and with this change, the behavior is now acceptable.

$("#SelectedAccount").bind("change", function(e)
{
    // "Fix" the selected value so that we have an ID associated with
    var $comboBox = $("#SelectedAccount").data("tComboBox");

    if ($comboBox.selectedIndex == -1)
    {
        for (var i = 0; i < $comboBox.$items.length; i++)
        {
            if ($comboBox.$items[i].innerText == $comboBox.text())
            {
                $comboBox.select($comboBox.$items[i]);
                break;
            }
        }
    }
});

[Shane Milton]

Correction: on the if statement in the for loop, add ".toLowerCase()" to both sides of the "==" sign.

[Alex Gyoshev]

Hello Shane,

This is indeed a bug that will be fixed for the official release -- thank you for sharing all the info and your solution. Your Telerik points have been updated.

Best wishes,
Alex Gyoshev
the Telerik team

[Jay]

I don't know if this was ever fixed, or if it was fixed and then broken again in a later release, but I'm struggling with this right now. 

I'm currently using a similar solution as above in order to prevent a bad selection.  But this is providing a bad user experience.  It's still reproducible in the examples, just as said above as well.

See: http://demos.telerik.com/aspnet-mvc/combobox/clientsideevents?theme=simple

Scenario 1:
So, if I type in the combobox enough to filter down to 5 results.  I then press the down arrow to select the second one.  Then tab off, everything works.

Scenario 2:
If I type enough to filter down to a single result, then tab off, the value of the combobox is whatever I typed in, and it does not select the highlighted item.

My expectation would be that the behavior be the same.

I'm currently knee-deep in the telerik js to find a workaround, but please, let me know if you have one already.  This issue has popped up as a QA defect for my project, and I'm trying to fix it rapidly.

Thanks,
-Jeff

[Jay]

Ok, I've got QA testing my change but I thought I'd post it here to let everyone know my work around.

I did something similar to above, but made some changes do to changes in Q1-2011

$("#MyCombo-input").change(function (e) {
    // "Fix" the selected value so that we have an ID associated with
    var comboBox = $("#MyCombo").data("tComboBox");
    var $comboBox = comboBox.dropDown;
    if (comboBox.selectedIndex == -1) {
        for (var i = 0; i < $comboBox.$items.length; i++) {
            if ($comboBox.$items[i].textContent == comboBox.text()) {
                $comboBox.select($comboBox.$items[i]);
                break;
            }
        }
    }

    if (comboBox.selectedIndex == -1) { // Still = -1, so lets select the default
            if (comboBox.selectedIndex == -1 && $comboBox.$items.length > 0) {
            comboBox.select($comboBox.$items[0]);
        }
    }
});

I had to do it this way, because if I had a list of items like:
Brown Cow
How Now
Bumblebee Tuna

And typed in "wn C"
the textbox would be filled with "wn Cow"

BUT the dropdown list, would have only one in it.

So I check to see if I didn't find a match, and if I didn't, and the dropdown list has items in it.  Then just select the first one.   This assumes they tabbed off of the field, or clicked elsewhere, etc.


Hope it helps...and thanks to the OP for the original code.   It helped a lot.


-Jeff

[Shane Milton]

Jeff,

Thanks for sharing your code. We have not yet but are about to upgrade to the 2011Q1 release (probably within the next week). I'm sure we'll hit the same problems you have, and I'm sure that we'll look to your code and fixes to save us time. So equally, thank you! :)

-Shane

[Shane Milton]

We finally upgraded to 2011Q1 controls and are tackling this problem. I seem to have code that usually fixes the problem, but I seem to be suffering from some timing issues that appear to be out of my control.

My "FixIt" onchange handler:

Telerik_ComboBox_Fix_onChange_with_optional_strictness: function (comboBox, isStrictList) {
    // "Fix" the selected value so that we have an ID associated with
    if (comboBox.selectedIndex == -1) {
        var isFixed = false;
        if (comboBox.value() == "") {
            isFixed = true;
        }
        else {
            for (var i = 0; i < comboBox.dropDown.$items.length; i++) {
                if (comboBox.dropDown.$items[i].innerText.toLowerCase() == comboBox.text().toLowerCase()) {
                    comboBox.select(comboBox.dropDown.$items[i]);
                    isFixed = true;
                    break;
                }
            }
        }

        if (isStrictList && !isFixed) {
            comboBox.value("");
            comboBox.text("");
            comboBox.selectedIndex = -1;
            //comboBox.reload();
        }
    }
}

In the last block, I want to conditionally clear out any value that was typed if it's not a "perfect" match (case-insensitive). To help assist with the "perfect match" I have AutoFill set to true.

If I'm slow and deliberate about everything I do, this works beautifully! However, if I'm very quick about it, there are two possible unexpected results that cause problems (i.e. where we think we have selected an item yet have not truly selected an item causing only the text to be posted as the selected ID). To trigger the unexpected results, follow these steps:

1. Type "12345" which will autocomplete to "1234567890" with the "67890" highlighted (because it auto-filled it)
2. hit [Backspace] (which essentially "undoes" the autofill)
3. hit [Tab] (which moves focus off of the field, triggering the source of the problem for this thread in the first place)

Once you follow those steps, you'll see one of three possibilities:

1. If you do the above deliberately and slowly, it works as we're trying to get it to work with this "FixIt" handler. Otherwise, see 2. and 3.
2. The text will be "1234567890", perhaps from delayed autofill functionality? [Edit: Upon further testing, this happens if you're very quick between the backspace and tab.]
3. The text will be "12345". [Edit: Upon further testing, this happens after you trigger scenario 2. after it puts focus back into the combobox even though you hit tab without you changing focus again.)

With problems 2 and 3, this takes us back to square one, and is the bug we're trying to actually solve with this control.

Jeff, did you experience that problem? I realize our handlers are a bit different. The most notable reason for this is because I was getting exceptions on your line referring to "$comboBox.$items[i].textContent" whereas "innerText" works nicely for me.

Telerik: When are we actually getting this fixed? Clearly it slipped through the cracks. This bug is making this control nearly impossible to perform proper validation on. All I want is the ability to make sure either an item is REALLY selected or the selection is empty. I need the ability to make sure there is nothing in between.

[Georgi Krustev]

Hello Shane Milton,

Erroneous behavior observed in point 2 is a known issue, which I am glad to inform you is already fixed. Now if end user remove auto-filled text and press TAB button input text will not changed. In other words input text will stay "12345" and will not be autocompleted to "1234567890".

As to the "strict mode", combobox does not support such functionality. I have logged it to our product backlog list for further investigation. Depending on the users interest we will determine whether to implement it. 

You can also check this help topic which describes what are the difference of the ComboBox, DropDownList and Autocomplete components.

For your convenience I have attached the modified JavaScript file to this message. 

Kind regards,
Georgi Krustev
the Telerik team