Hi Telerik team,

Using DropDownList with 4 items, setting visibility of the third one to false (either directly in apsx definition or setting it at page load event), display is OK, but when selecting the fourth and submitting the changes, server see the third one selected.

Attached is a project reproducing ths issue.

To replicate, place multiple RadDropDownList controls using Design mode and try to set different width to each of them, see http://somup.com/cY6njDl2kp

Current style

.k-reset {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none; }

What it should be:

.k-reset {
    margin: 0;
    padding: 0;
    border-width: 0;
    outline: 0;
    text-decoration: none;
    font: inherit;
    list-style: none
}

Currently, the HTML tags set in the Text property of DropDownListItem are not encoded.

Add option to move each highlighted item to the top (while searching), even if it is found outside of the visible part of the drop-down. The current behavior is to show the highlighted item at the bottom of the dropdown.

A workaround is to disable the embedded jQuery and use an older version (for example, 1.11.1 which is the previous version the suite used): https://docs.telerik.com/devtools/aspnet-ajax/controls/scriptmanager/disabling-the-embedded-jquery

Repro steps:

- Add a dropdownlist, attach server handler
- select item

Expected: postback

Actual: error

<asp:Label Text="" ID="Label1" runat="server" />
<telerik:RadDropDownList runat="server" ID="rddl1" OnSelectedIndexChanged="rddl1_SelectedIndexChanged" AutoPostBack="true">
    <Items>
        <telerik:DropDownListItem Text="first" />
        <telerik:DropDownListItem Text="second" />
        <telerik:DropDownListItem Text="third" />
    </Items>
</telerik:RadDropDownList>


    protected void rddl1_SelectedIndexChanged(object sender, Telerik.Web.UI.DropDownListEventArgs e)
    {
        Label1.Text = (sender as RadDropDownList).SelectedText;
    }

Workaround: Place the following script below the ScriptManager.

var $T = Telerik.Web.UI;
var $ = $ || $telerik.$
var _toggleActiveDescendantAttributes_old = $T.RadDropDownList._toggleActiveDescendantAttributes;

$T.RadDropDownList._toggleActiveDescendantAttributes = function (element, id, value) {
    if ($("#" + id + "_selected_item").length == 1) {
        $("#" + id + "_selected_item").removeAttr('id')
    }
    _toggleActiveDescendantAttributes_old.call(this, element, id, value);
}

When the LIST is displayed in a RadDropDownList, the datasource is usually a lookup table.  Therefore,  it is not practical to set the LIST attribute "DropdownWidth" to a fixed number of pixels, since items can be added to the lookup table where the text length is longer than any currently in the table.   If you text is too long for the LIST width, the text wraps and this is not a pleasant user experience.  

This control needs an autosize feature for the LIST, so it fits the longest text without causing wrapping.   This feature already exists on the RadComboBox with attributes DropDownAutoWidth="Enabled" and "NoWrap=true".   These should also be used I the RadDropDownList so the LISTS work identically.

RadDropDownList has an attribute "DropdownWidth" that controls the width of the LIST when it drops down.   

If you set the width to a specific number of pixels (say 200px) then there is no issue.   But if you set it to "100%"  then I would have expected it to be 100% of the owner controls width.   But this is not the case, and it becomes very evident when the RadDropDownList is used with a template column of a RadGrid.  

In a RadGrid template column, this setting causes the LIST width to expand all the way to the right edge of the screen.   This seems to me to be a bug, as it makes no sense to behave this way.   You can see this behavior in the screenshot I have attached.  

It becomes more evident that this was not the intended functionality (and must be a bug) when you substitute the control with a RadComboBox, having exactly the same attributes.  This will use the combo's default settings and show a dropdown list.  With the RadCombBox the LIST does not expand to the far right of the screen, it behaves as expected, having 100% of the combobox width.  

I would expect both controls to work identically with their LISTS when setting the "DropdownWidth" attribute to "100%".

The issue is not reproducible for RadDropDownList with RenderMode="Lightweight" .

The behavior of the control when it is navigated through the keyboard should be the same independent of the drop-down state (opened or not).

1. Open http://demos.telerik.com/aspnet-ajax/dropdownlist/examples/overview/defaultcs.aspx online demo

2. Open the drop-down of the RadDropDownList

3. Select an item from the drop-down

4. Open the dropdown again and using down or up arrow keys, change the highlight without selecting new item(the text in the input is changing)

5. Now press ESC key -> Result: the selected item is shown in the input(instead of the last highlighted item) -> this is the right behavior.

6. To reproduce the false behavior - focus the RadDropDownList(the drop-down should be closed and in the RadDropDownList there should be a selected item)

7. Using up/down arrow keys highlight items(the text in the input is changing with the text of the highlighted item)

8. Press ESC key -> the text of the highlighted item remain in the input of the RadDropDownList instead of the text of the selected item. This is an issue.