AutoCompletExtender doesn't allow to move ahead of first item with arrow-key

[dharmbhav]

Hi,

I am using an AJAX AutoCompleteExt ender to display a list of suburbs-postcodes after the user presses 3 keys in the given textbox.

The problem is that on the page, I can't move my selection below the first item (with down arrow key/mouse). However with mouse if I click on any item, it gets selected.

<asp:TextBox ID="txtPostalSuburb" runat="server" CssClass="select_insert_menu_text1" MaxLength="40" TabIndex="9"></asp:TextBox>
							<cc1:AutoCompleteExtender ID="txtPostalSuburb_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="~/Web/Common/ListingService.asmx" TargetControlID="txtPostalSuburb" UseContextKey="False" ServiceMethod="GetSuburbList" MinimumPrefixLength="3" CompletionListCssClass="contact-details-suggestion-list" OnClientItemSelected="AutoCompleteExtender_ItemSelected" CompletionListItemCssClass="contact-details-suggestion-list-item" >					</cc1:AutoCompleteExtender>

CSS:

.contact-details-suggestion-list
{
	background-color: window;
	color: windowtext;
	cursor: default;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding:0px;	
	text-align: left;
	border: solid 1px #005883;
	margin-top: 0px;
	font-size: 10px;	
}
.contact-details-suggestion-list-item
{
	border-bottom: dotted 1px black;	
}

Any suggestion is appreciated.

Thanks in advance

[benwizzle]

Ok, so i recreated what you have here and found that the error is when you apply the .contact-details-suggestion-list-item css class to the autocomplete extender.
Firefox error console says: Sys.ArgumentNul lException: Value cannot be null.
Parameter name: className

The html code firefox points to is here:

Sys.UI.DomElement.removeCssClass = function Sys$UI$DomElement$removeCssClass(element, className) {
    /// <param name="element" domElement="true"></param>
    /// <param name="className" type="String"></param>
    var e = Function._validateParams(arguments, [
        {name: "element", domElement: true},
        {name: "className", type: String} ---ERROR HERE
    ]);

I played around with this and tried to find a solution and the only one I could come up with was to just remove that CSS class. I know thats not really exactly what you were looking for but thats the best I can offer :(.
My guess is that there is a bug with the autocomplete extender.