Adjust PR #5389

* Convert $watch to ng-change and re-wrote test
* Removed unnecessary styles
* Use .form-control instead of class='form-control'

test/spec/filtersCtrlSpec.js

@@ -10,6 +10,7 @@ describe('Filters Controller', function() {
     $controller('FiltersCtrl', {$scope: scope, User: {user: user}});
   }));
 
+  describe('tags', function(){
     it('creates a tag', function(){
       scope._newTag = {name:'tagName'}
       scope.createTag();
@@ -25,13 +26,14 @@ describe('Filters Controller', function() {
       scope.toggleFilter(tag);
       expect(user.filters[tag.id]).to.eql(false);
     }));
+  });
 
-  it('updates user\'s filter query when filterQuery is changed', function () {
-      scope.$apply();
+  describe('updateTaskFilter', function(){
+    it('updatest user\'s filter query with the value of filterQuery', function () {
+      scope.filterQuery = 'task';
+      scope.updateTaskFilter();
 
-      scope.filterQuery = 'foo';
-      scope.$apply();
-
-      expect(user.filterQuery).to.eql('foo');
+      expect(user.filterQuery).to.eql(scope.filterQuery);
+    });
   });
 });

website/public/css/filters.styl

@@ -36,13 +36,5 @@
     @extend $hrpg-button-with-input
     hrpg-button-color-mixin($color-options-submenu)
   .filters-search
-    float: left
-    margin-right: 5px
     margin-bottom: 0.618em
-    width: 180px
-    input
-      padding: 4.5px 6px !important
-      height: 29px !important
-    .input-group-addon
-      height: 29px !important
-      padding: 4.5px 10px !important
+    max-width: 180px

website/public/js/controllers/filtersCtrl.js

@@ -31,11 +31,9 @@ habitrpg.controller("FiltersCtrl", ['$scope', '$rootScope', 'User', 'Shared',
       // User.save();
     };
 
-    $scope.$watch('filterQuery', function (newValue, oldValue) {
-        if (newValue !== oldValue) {
-            user.filterQuery = newValue;
-        }
-    });
+    $scope.updateTaskFilter = function(){
+      user.filterQuery = $scope.filterQuery;
+    };
 
     $scope.createTag = function() {
       User.user.ops.addTag({body:{name:$scope._newTag.name, id:Shared.uuid()}});

website/views/main/filters.jade

@@ -2,7 +2,7 @@
   .row
     .filters(ng-controller='FiltersCtrl')
       .input-group.input-group-sm.filters-search.pull-right
-          input(type='text', class='form-control', placeholder=env.t('search'), ng-model='filterQuery')
+        input.form-control(type='text', placeholder=env.t('search'), ng-model='filterQuery', ng-change='updateTaskFilter()', ng-model-options='{ debounce: 250 }')
         .input-group-addon
           .glyphicon.glyphicon-search
       ul.filters-controls