CODEWITHSUNDEEP
androidknockout.js
MickJuice
MickJuice

Reputation: 539

Android Knockout Select Problems - Chrome and Native Browser

I'm having separate but related issues relating to dropdown events in both the native and chrome browser on an android device (Samsung Galaxy Tab4).

I'm using knockout with Ajax calls to fill the dropdown list. Here's the template code html (on change event here is just an alert for testing change event):

 <div class="col-xs-5 col-sm-5 col-md-2 col-lg-2 search-form-label" data-bind="visibleFade: advancedSearch">
                Proceeding Type
            </div>
            <div class="col-xs-7 col-sm-7 col-md-4 col-lg-4 search-form-data" data-bind="visibleFade: advancedSearch">
                <select class="select-12" data-bind="disabled: !proceedingTypeCodes.loaded(), event: {change: onSelectChange}, value: ProceedingType, options: proceedingTypeCodes, optionsText: 'Name', optionsValue: 'Code', optionsCaption: '-- ALL --'"></select>
            </div>

The view model is actually built up based on a model brought back from an Ajax call (using the json, it creates the model and binds to self. Values are brought back based on ajax requests, added to select list and loaded is marked as true. This is all called on page load

_dataService.getRemoteSiteData("Case/GetCaseStatusCodes?isForSomething=false", null, _loadCaseStatusCodes);

  var _loadProceedingTypeCodes = function (data) {
    _viewModel.buildModel({ proceedingTypeCodes: data }, _self);
    _self.proceedingTypeCodes.loaded(true);
};

It's worth mentioning that all of this works for all other browsers, devices and platforms. We even have another site that uses this exact same paradigm for building select lists which works great (although there is only one select list on that search page whereas there are multiple ones on this page).

Anyone run into this problem?

Upvotes: 2

Views: 588

Answers (1)

MickJuice
MickJuice

Reputation: 539

I believe this problem is unique to Android's native browser and even when I stripped away knockout, bootstrap, etc, there was still some inconsistency.

What seems to be working is using jquery 'on' and $(this).focus methods to guarantee what you click on is in focus

$('.container').on('click','select',function(){
    $(this).focus();
});

I used on as this call is in my _layout page so these inputs won't be on the page when it loads (generally) but it can really go anywhere. Very annoying bug but I think this is a decent workaround.

Related to the chrome issue, this was fixed in Chrome 40.* release

Upvotes: 1

Related Questions