LightSwitch HTML Details Pickers not consistently with autocomplete

Dears,

Whenever I have a navigation property on the UI, lightswitch assigns a details picker control by default. The problem is sometimes the details picker comes with auto-complete and sometimes it doesn't, why it does that I still have no idea.

With auto-complete:

Without auto-complete:

Has anyone faced this problem before, or knows how to force all details pickers to have auto-complete?? I'm using the latest VS Lightswitch 2015. Appreciate any help

In order to try and understand why this can occur, it's best to consider the LightSwitch framework code that determines this behaviour.

The LightSwitch framework library can be found in your project's Scripts\msls-?.?.?.js file (the question marks will mirror the version of LightSwitch library that you're using e.g. msls-2.5.4.js is the November 2015 release).

The particular library code, which determines if the details picker is rendered with the searchable auto-complete options, is located within the details picker's _attachViewCore function. The following lists the relevant section of this routine which are focused on overriding the value of isSearchable (which is initialised to false at the start of the _attachViewCore function):

if (!_isReadOnlyOrDisabled(me) &&
    !!me.data && !!me.data.valueModel && !!me.data.valueModel) {
    propertyModel = me.data.valueModel;
    if (propertyModel) {
        isSearchable = !msls_getAttribute(propertyModel.propertyType, ":@NotSearchable");
    }
}

Once this code has executed, the value of isSearchable determines if the DetailsPicker is rendered as the normal searchable picker (true) or as a simpler drop-down selection (false).

Based on this, the following factors could be causing the picker to render as the simpler drop-down control:

1) The function _isReadOnlyOrDisabled returns true

As the following excerpt from the LightSwitch library shows, this function could return true if the contentItem control is either disabled or set to read-only at the point it's rendered:

function _isReadOnlyOrDisabled(me) {
    var contentItem = me.data;
    return (!contentItem || !contentItem.isEnabled || contentItem.isReadOnly);
}

This can occur if you have code that sets these properties in the screen's created function. Furthermore, if these are set when an asynchronous operation completes, it could explain the intermittent nature of the problem. For example, the following code would cause the problem if the screen.getRepair promise completes before the contentItem renders, or could avoid the issue, if the promise takes longer and doesn't complete until after the contentItem has rendered:

myapp.AddEditRepair.created = function (screen) {
    screen.getRepair().then(function onComplete(r) {
        screen.findContentItem("ClassificationDetailsPicker").isReadOnly = r.UnclassifiedRepair;
        // or
        screen.findContentItem("ClassificationDetailsPicker").isEnabled = !r.UnclassifiedRepair;
    });
};

If you need to implement this type of behaviour, you should instead use the picker's _postRender routine e.g.:

myapp.AddEditRepair.ClassificationDetailsPicker_postRender = function (element, contentItem) {
    contentItem.screen.getRepair().then(function onComplete(r) {
        contentItem.isReadOnly = r.UnclassifiedRepair;
        // or
        contentItem.isEnabled = !r.UnclassifiedRepair;
    });
};

2) Cannot access me.data.valueModel

This is the hardest of the possible causes to explain, as the valueModel should be initialised before the control is rendered. As a result, if you discount the other two options, I'd suggest posting an example of the code you're using to display the screen that features the details picker (including any data access promises that precede the myapp.show call).

3) The attribute @NotSearchable is set to false

This is unlikely to be the cause of your problem, as the value of this attribute should be consistent. This is because the attribute is based upon the 'Is Searchable' property against the Table associated with the details picker. As shown below, you can view this setting in the table designer by setting the focus to the table: