[BUG] starting filter options do not add filteredOut and z-index to element

[xileftenurb]

Describe the bug
I have a list of element with a single filter.
If i use the "filter" options to have a starting filter, the element are hidden, but the z-index is not set to -1000.
the filteredOut class is not set either, but I don't use it.

In my case, this cause a problem because all my element have a button at the same place, and all the hidden element are stacked in the first case of the grid. if the z-index is not set and I want to click on the first element, I instead click on a random hidden element.

after a small investiguation, this is du because the "transitionend" event is not triggered, but I could not follow more in the code why,

Filterizr version
Which version of Filterizr do you have installed in your project?
version 2.2.3.

To Reproduce
Steps to reproduce the behavior:

1. Create a filteriz list with a filter pre-apply
2. check in console if element hidden have classe "filteredOut" and z-index to -1000. they do not as far as I know.

Desktop (please complete the following information):

• OS: window
• Browser : firefox
• Version 68

[adisss82]

I also have this error. I managed by adding css:
.filtr-item[style*="opacity: 0"] {
z-index: -999;
}
.filtr-item:not([style*="opacity: 0"]) {
z-index: 10;
}

[chrisdempsey]

@xileftenurb

filteredOut class is not set either

I experienced the same issue with the .filteredOut class not being set. In my case it caused the content of #filter-container to effectively overflow as .filtr-items that shoud have been filtered out were positioned beyond the website footer which caused the page to scroll and introduced an area of white space.

I don't understand the code well enough to fix the bug but can use the following workaround.

  // deal with filterizr bug where inline styles are not applied where elements are .filteredOut.
  // this causes #filter-container content to overflow website footer because #filter-container has height:1234px as inline style and remaining .filtr-items are positioned below this
  filterizr.setOptions({
    callbacks: {
      onFilteringEnd: function() {
        $(".filtr-item.filteredOut").css({'display':'none'});
      }, 
    }, 
  });

My project extends the core filterizr functionality in a way that required several events to run the callback shown above.

This obviously requires jquery but could be translated to vanilla javascript.