1

I have a filter row on top of my page. When clicked, a given filter filters the results, and gets highlighted (specific class). When clicking again, the class should be cleared and visually the filter is unselected.

This works fine on desktop, but on mobile, when I click, the filter gets correctly selected (and the results correctly filtered), but when I click again, the filter remains selected, breaking the user experience. If I click again on something else, the filter gets unselected completely as it should - one click to late... ;)

What could be wrong? I tried installing the ngTouch module as well, but doesn't seem to change anything.

HTML:

section.filter-area
  .col-xs-3.filter-row(ng-repeat="flt in vm.filters")
    .filter(ng-click="vm.filter(flt)" ng-class="{'selected': flt.isSelected}")
      .filter-title {{flt.tag}}
      .filter-icon
        img.filters(src="{{flt.icon}}")

js:

'use strict';

Controller.$inject = ['$http'];

function Controller($http) {
      /* other stuff */
      vm.filter = function(flt) {
      if (flt.isSelected === undefined) {
        flt.isSelected = false;
      }

      flt.isSelected = !flt.isSelected;

      if (flt.isSelected) {
        activeFilters += 1;        
        filterProducts(flt);
      } else {
        activeFilters -= 1;
        unselectFilter(flt);
      }
    }
}
Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
transient_loop
  • 5,984
  • 15
  • 58
  • 117
  • When debugging I can see that the property `isSelected` correctly gets set to false, so then I do not understand why the mobile device does not remove the 'selected' class? – transient_loop Jun 01 '16 at 16:20

1 Answers1

0

It was a conflicting CSS entry.

I had the same rule for hover and selected, which was causing conflict on mobile, as mobile don't support hover.

.filter:hover, .filter:selected {
   background-color: #ccc;
   color:white;
}

Thus I moved the hover rule on a media query, and also applied this solution https://stackoverflow.com/a/6262682/169252

in order to support any touch device.

Community
  • 1
  • 1
transient_loop
  • 5,984
  • 15
  • 58
  • 117