Class attributes are not applied from AutocompleteFor()

[DiskJunky]

To reproduce: Use @Html.AutocompleteFor() in a view to render the typeahead, setting the last parameter to
new { htmlAttributes = new { @class = "form-control" } }

Result: Typeahead is rendered with class "typeahead tt-input" but no "form-control".

Note: this occurs in the sample application in the documentation.

Fix (for me anyway) via jQuery;

function FixTypeaheadStyling() {
    var typeaheads = $("input[type='text'].tt-input");
    typeaheads.removeClass("tt-input").addClass("form-control");
    typeaheads.parent('span.twitter-typeahead').css('display', 'block');
}

[timdwilson]

Hi there, are you using the latest version of AutocompleteFor? I added in the functionality you are requesting in the latest version. You can see in the Wiki on this site that my tests show this works. If you have a test where this is failing, can you please send me the source code? Thanks

[DiskJunky]

I'm using via NuGet;
Typeahead.js: 0.10.5
Typeahead.js for MVC 5: 1.1.2
Typeahead.js for MVC 5 Models: 1.0.7

I've verified that the specified class is not appearing in your sample web application as of 15/03/2016 12:00 GMT. I haven't tried running your unit tests but given that I'm seeing the same behavior in both the sample app and my own it would seem that there's a bug there. Unit tests are all very well but sometime an issue appears only when you actually go and try it :)

Generated output by right-clicking the Name field in Chrome;
<input class="typeahead tt-hint" data-autocomplete-id-field="PersonId" data-autocomplete-url="/HelloWorld/GetPeople" data_autocomplete_url="/HelloWorld/GetPeople" type="text" value="" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">
<input class="typeahead tt-input" data-autocomplete-id-field="PersonId" data-autocomplete-url="/HelloWorld/GetPeople" data_autocomplete_url="/HelloWorld/GetPeople" id="Name" name="Name" type="text" value="" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">

As you can see: no class attribute specified with "form-control"

[timdwilson]

Thank you for your detailed response :) I will take a look.

[mnbob70]

The issue is on line 102 of HtmlHelpers.
if (!((IDictionary<string, object>) htmlAttributes).ContainsKey("@Class"))
should be
if (!((IDictionary<string, object>) htmlAttributes).ContainsKey("class"))

[timdwilson]

Can you make the change and issue a pull request?

Sent from my iPhone

On Apr 28, 2016, at 1:40 PM, Bob Hanson notifications@github.com wrote:

The issue is on line 102 of HtmlHelpers.
if (!((IDictionary) htmlAttributes).ContainsKey("@Class"))
should be
if (!((IDictionary) htmlAttributes).ContainsKey("class"))

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

[peterdew]

@mnbob70 that was totally correct Bob, but this code is changed by the recent merge from Groblerf. I'll test this issue against the new code asap

[timdwilson]

Hi Peter, Sounds good! Thanks for your work.

…

Sent from my iPhone

On Sep 19, 2017, at 2:53 AM, Peter de Witte ***@***.***> wrote: The code is changed recent merge from Groblerf. I'll test this issue against the new code asap — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.