LayerList: Combining custom filters with built-in search filter?

fdeters

How do you combine custom filters (using the LayerList's `filterPredicate`) with the built-in search bar filter?

In a project using the LayerList component (using v4.33 for both core and map-components), I show the built-in search bar filter using `show-filter`, and I also provide toggleable custom filters. The setup is something like this:

<arcgis-layer-list show-filter></arcgis-layer-list>
<button id="show-visible-only" aria-pressed="false">
  Show only visible layers
</button>

<script type="module">
  const layerList = document.querySelector('arcgis-layer-list');
  const filterButton = document.getElementById('show-visible-only');

  const showVisibleOnlyPredicate = (item) => item.visible;

  filterButton.addEventListener('click', (event) => {
    const isPressed = filterButton.getAttribute('aria-pressed') === "true";
    if (isPressed) {
      layerList.filterPredicate = null; // null is the default
    } else {
      layerList.filterPredicate = showVisibleOnlyPredicate
    }
  });
</script>

 

The problem is that setting `layerList.filterPredicate` overrides the default search behavior. The built-in filter search bar does not work while a `filterPredicate` is defined. Am I doing something wrong, or is this just the way it works? If the latter, I would appreciate a fix, as this seems like a bug.

I could probably find a way to re-implement the built-in search bar behavior and add it to `filterPredicate` manually (I already have a system for allowing multiple custom filters simultaneously), but it seems like this should work on its own.

Sage_Wall

Hi @fdeters ,

I think all you would need to do is add some logic to grab the `filterText` property value and add it to the filterPredicate.  Something like this:

const showVisibleOnlyPredicate = (item) => {
        if (item.visible &&  item.title.toLowerCase().includes(layerList.filterText.toLowerCase())) {
          return item
        };
      }

 

Played around with it here but I used a calcite switch and it seems to work
https://codepen.io/sagewall/pen/pvbZmWL?editors=1000