WIP: Incorrect order of numerical values (eg, 11, 12, 4, 5, etc) with the Filter Checkbox and Select elements

Bugs
1

The Filter Checkbox and Filter Select elements are listing numerical values in the wrong order. Eg, instead of “4, 5, 6, 11, 12”, they are outputting as “11, 12, 4, 5, 6”.

Bricks_filter_numerical_order_issue
Bricks_filter_numerical_order_issue1020×944 74 KB

The max_capacity field is an ACF number field. With the Filter Range element, the min and max values are outputting correctly:

Bricks_filter_numerical_order_issue_2
Bricks_filter_numerical_order_issue_21011×827 61.2 KB

I would prefer to use checkboxes so if anyone knows of a workaround, or can point out what I did wrong, your help is much appreciated!

Browser: Chrome 137
OS: Windows

2

Hi @jiwon,

thank you for your report. I was able to reproduce that, and I’ve added it as an improvement task to our task list.

There is no simple workaround for now, but you can use the code below to sort the fields by numeric value. Just keep in mind, once you will filter, it will reset, so you have to update the code to “reorder” the checkboxes every time. But it should be a good starting point.

document.addEventListener('DOMContentLoaded', function() {
  const ul = document.querySelector('ul.brxe-filter-checkbox');
  const lis = Array.from(ul.querySelectorAll('li'));

  lis.sort((a, b) => {
    const aValue = parseInt(a.querySelector('input').value);
    const bValue = parseInt(b.querySelector('input').value);
    return aValue - bValue;
  });

  lis.forEach(li => ul.appendChild(li));
});

We will update this topic when this will be implemented.

Best regards,
Matej

1 Like