Range select does not get removed when pressing remove filter link

Created on 1 July 2025, 11 days ago

Problem/Motivation

When using a range select filter and you try to remove it it does not remove the selection.

The select is using the value to clear it, but the value when using a multiple values are for example min|max. And not the actual value of the selected input for example 2000-5000. So when trying to clear the value the selector is empty.

In the onRemoveClick function:

input.querySelectorAll(`[value="${value}"]`).forEach((element) => {
   element.selected = false;
});

Steps to reproduce

Add a between filter to a view with a min and max field and expose it.
Add a summary field with remove links.
Use the filter to show the summary.
Click on the remove link (icon).
The filter is not cleared.

Proposed resolution

In the onRemoveClick function different inputs are already handled. We can also add select to it and just clear everything that is selected. The value is probably used to handle multiple selects, which you will "never" use for a range select. So also only do it for single selects and let the multiple select fallback on the existing else.

Something like this:

if (input.tagName === 'INPUT') {
         .......existing code  
}
else if (input.tagName === 'SELECT' && !input.hasAttribute('multiple')) {
   input.querySelectorAll(`[selected="selected"]`).forEach((element) => {
              element.selected = false;
   });
 }
else {
  input.querySelectorAll(`[value="${value}"]`).forEach((element) => {
        element.selected = false;
     });
     }
🐛 Bug report
Status

Active

Version

3.1

Component

Code

Created by

🇳🇱Netherlands mike.vindicate

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024