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 · Accepted solution]

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

[fdeters]

Argh, I was hoping to avoid re-implementing the built-in filter logic 😕 This does work as a solution though, thanks.

As an aside: I noticed that `arcgisPropertyChange` event doesn't fire when `LayerList.filterText` changes. And it might only fire when `state` changes? Anyways, IDK what the design philosophy is there, maybe there's a good reason to not fire a million events, but it is confusing that `state` is the only one included right now.

[Sage_Wall]

Yeah, your correct.  arcgisPropertyChange currently is only wired up to the `state` property on the layer list. You can see the properties wired up in the return type in the doc.   We've tried to be conservative in which properties are included for the reason you pointed out, but it's pretty easy to add properties to the event if we get a good business case.  We'll consider adding `filterText` in a future release.