I am using a directive called "click-to-edit-select2" in my Angular module. The directive has an editorTemplate that consists of HTML elements and AngularJS binding expressions to enable editing functionality.
angular.module('click-to-edit-select2', [])
.directive("clickToEditSelect2", function() {
var editorTemplate = '<td id="4" class="click-to-edit-select2">' +
'<div id="3" style="height:20px" ng-click="enableEditor()" ng-hide="view.editorEnabled">' +
'{{value}} ' +
'</div>' +
'<div id="2" ng-show="view.editorEnabled" style="padding:0px 10px 0px 0px";>' +
'<input id="1" type="hidden" ui-select2="select2Options" ng-model="view.editableValue" ng-change="changeText()" />' +
'</div>' +
'</td>';
return {
restrict: "A",
replace: true,
template: editorTemplate,
scope: {
value: "=clickToEditSelect2"
},
controller: function($scope, $element, $attrs) {
$scope.view = {
editorEnabled: false
};
$scope.enableEditor = function() {
if ($scope.$parent.term.Status == "new") {
$scope.view.editorEnabled = true;
$scope.view.editableValue = $scope.value;
}
};
$scope.disableEditor = function() {
$scope.view.editorEnabled = false;
};
$scope.save = function() {
$scope.value = $scope.view.editableValue.id;
$scope.disableEditor();
};
$scope.$watch('view.editableValue', function(newVal, oldVal) {
if (newVal != undefined && newVal != "") {
if (oldVal == newVal) return;
// Code for handling updated values
}
}, true);
$element.on('select2-blur', function(event) {
$scope.save();
});
// Additional logic for select2 options and event handling
}
};
});
This code utilizes select2 version 3.4.8, bootstrap version 2.3.1, and AngularJS version 1.2.19.
The behavior expectation from the select2 dropdown element includes hiding it upon selection or clicking somewhere else. However, issues with the onBlur event not triggering as expected have been encountered. The div with the select2 dropdown remains visible even after making a selection.
Although the select2-blur event is being triggered each time, the DOM elements do not update immediately. This leads to delays in the desired behavior and requires a double interaction to show the selected value.
Attempts to attach the blur event to different elements have not been successful. Seeking fresh perspectives on resolving this issue after spending some time debugging.
Thank you for any insights or assistance!