cancel
Showing results for 
Search instead for 
Did you mean: 

magento2 2.2.3 Product_List_Toolbar select2 is missing after Ajax call on filter 'SortBy' options

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

magento2 2.2.3 Product_List_Toolbar select2 is missing after Ajax call on filter 'SortBy' options

Hello dear community,

 

At the moment I have a strange problem.
For the catalog product list, I got a theme that uses the select2.js option for filtering at the toolbar. After I click on a sort filter as example 'price' or 'productname' i have a 50% chance to get my sorted list with select2 elements back after ajax call. Otherwise it will only render the default sorter and the filtering does not work anymore and if i click on any filter options its jump to the top anchor till i reload the whole page.

 

If i disable my browser cache it works perfectly but i think this is not a good solution for production :/

 

Here is the rendered html when it works :

 

<div class="control"><select id="sorter" data-role="sorter" class="sorter-options select2-hidden-accessible" tabindex="-1" aria-hidden="true"> <option value="name" selected="selected">Produktname</option> <option value="price">Preis</option></select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 204px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-sorter-container"><span class="select2-selection__rendered" id="select2-sorter-container" title="Produktname">Produktname</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div>

 

Here is the rendered html when it fails :

 

<div class="control"><select id="sorter" data-role="sorter" class="sorter-options" data-mage-init="{&quot;selectize&quot;:{}}"> <option value="name">Produktname</option> <option value="price" selected="selected">Preis</option></select></div>

does anybody know how to fix it or could help to locate the problem what i should looking for in the code ?