Impossible to select value in angular 1.6.4

[marlag]

Seems mechanism of control available options in angular 1.6.4 triggers value change back to undefined on select option. Short example on:
http://plnkr.co/1R8G1USwjmdmzFJwKalm

Any idea how to prevent?

[bsubasic]

+1

[bsubasic]

Hi @marlag,

What I have found is that there is a double call to the setSelectizeValue function when you have 'maxItems = 1' because it tries to compare an array and string value. I think this will solve the issue, but I haven't tested it. I've added 'selectizeValueToCompare' which will be an array of multiple items or a string for only one item.

                    var setSelectizeValue = function() {
                        validate();

                        selectize.$control.toggleClass('ng-valid', modelCtrl.$valid);
                        selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid);
                        selectize.$control.toggleClass('ng-dirty', modelCtrl.$dirty);
                        selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine);

                        const selectizeValueToCompare = settings.maxItems === 1 ?                                                               
                                selectize.items[0] :  selectize.items;

                        if (!angular.equals(selectizeValueToCompare, scope.ngModel)) {
                            selectize.setValue(scope.ngModel, true);
                        }
                    }

Regards,
Bojan

[marlag]

The issue is rather related to changed SelectController in angular, which now in readValue is checking hasOption. As options are not configured by ng-options it returns null what causes deselecting item...

[bsubasic]

It works in my project (after fixing setSelectizeValue) for both single and multiple selections, with these versions:

• AngularJS 1.6.4
• Selectize 0.11.2
• jQuery 2.2.4

<selectize config="{plugins: ['remove_button'], delimiter: ','}" 
                 class="search__tags" placeholder=""
                 ng-model="mainSearch.selectedServices" 
                 ng-change="mainSearch.applyFilterChange()"
                 options="mainSearch.servicesFilterItems">
</selectize>

Options data format: [ {text: 'text1', value: 'value1'}, {text: 'text2', value: 'value2'} ]

What I can see is that we are using different versions of Selectize and jQuery.

Maybe it's worth mentioning that I'm using 'controller as' syntax instead of a $scope.

Good luck 👍

[marlag]

The main difference is you are using "standalone" directive tag - I am applying to select tag (to have ng-fab-form based validation on top). And in this case it interferes with angular select controller. Within "standalone" directive there is no issue. I've made workaround using "standalone" directive and some "hacks" for ng-fab-form.

Maybe applying to select was never intended and worked accidentally ;) Then should be closed.