LP#1819233 improve AngularJS eg-basic-combo-box filtering
authorMike Risher <mrisher@catalyte.io>
Wed, 20 May 2020 23:27:20 +0000 (23:27 +0000)
committerGalen Charlton <gmc@equinoxOLI.org>
Thu, 11 Nov 2021 14:58:42 +0000 (09:58 -0500)
Adjust the eg-basic-combo-box so that it doesn’t give console errors
when typing characters such as [. Fix the bug that causes it to
sometimes show no results when there are valid results that match.

To test
-------
[1] Apply the patch, then create a new report template, add a
    display field, then open the Change Transform modal.
[2] Verify that the selection box will accept characters like '['
    as input without browser console noise, that the filtering
    is case-insensitive, and that filtering continues to work
    after clicking on the selector.
[3] Instances of this combo box can also be found in the AngularJS
    volume/copy editor.

Signed-off-by: Mike Risher <mrisher@catalyte.io>
Signed-off-by: Terran McCanna <tmccanna@georgialibraries.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>

Open-ILS/web/js/ui/default/staff/services/ui.js

index c903811..e3b4f62 100644 (file)
@@ -937,7 +937,7 @@ function($uibModal , $interpolate , egCore) {
         },
         template:
             '<div class="input-group">'+
-                '<input placeholder="{{placeholder}}" type="text" ng-disabled="egDisabled" class="form-control" ng-model="selected" ng-change="makeOpen()" focus-me="focusMe">'+
+                '<input placeholder="{{placeholder}}" type="text" ng-disabled="egDisabled" class="form-control" ng-model="selected" ng-change="makeOpen()" focus-me="focusMe" ng-click="inputClick()">'+
                 '<div class="input-group-btn" uib-dropdown ng-class="{open:isopen}">'+
                     '<button type="button" ng-click="showAll()" ng-disabled="egDisabled" class="btn btn-default" uib-dropdown-toggle><span class="caret"></span></button>'+
                     '<ul uib-dropdown-menu class="dropdown-menu-right">'+
@@ -957,8 +957,11 @@ function($uibModal , $interpolate , egCore) {
 
                 $scope.compare = function (ex, act) {
                     if (act === null || act === undefined) return true;
-                    if (act.toString) act = act.toString();
-                    return new RegExp(act.toLowerCase()).test(ex)
+                    if (act.toString) {
+                        act = act.toString();
+                        act = act.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); // modify string to make sure characters like [ are accepted in the regex
+                    }
+                    return new RegExp(act.toLowerCase()).test(ex.toLowerCase());
                 }
 
                 $scope.showAll = function () {
@@ -978,6 +981,13 @@ function($uibModal , $interpolate , egCore) {
                     $scope.makeOpen();
                 }
 
+                $scope.inputClick = function() {
+                    if ($scope.isopen) {
+                        $scope.isopen = false;
+                        $scope.clickedclosed = null;
+                    }
+                }
+
                 $scope.makeOpen = function () {
                     $scope.isopen = $scope.clickedopen || ($filter('filter')(
                         $scope.list,