# How to make facets stay even after the selection

**URL:** <https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [October 5, 2021, 8:29pm UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961 "2021-10-05T20:29:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [October 5, 2021, 8:29pm UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961/1 "2021-10-05T20:29:32Z")

</div>

Is there a way, can we show all facets even after the selection on single facets value.  
Right now if i filter on any facets, all the other selection are hidden.  
Example like below:  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/5/2/522a8b8ab24708c5aeb17296b15268db113dee09.png)

![image](https://us1.discourse-cdn.com/elastic/original/3X/1/9/1970459ae4785fcf8c811c3477e5ebc4eb485b18.png)

is there a config to do that. or Do we have to customize something.

Thanks

---

<div class="post-metadata">

**Author:** ![reka.gay](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/reka.gay/32/91470_2.png) [@reka.gay](https://discuss.elastic.co/u/reka.gay)\
**Post date:** [October 6, 2021, 5:07am UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961/2 "2021-10-06T05:07:10Z")

</div>

You can make your facets disjunctive - then they will remain (without their counters being updated) on selection as they represent an OR not an AND relation - so selecting more will increase the number of results, not decrease them.

Only works within its own "group", though: in your example, if you had an "Exam phase" as well as a "Study Phase", selecting a box in the former will filter out all without that value in the latter.

I got around that by implementing a session cookie for available facets so at least I can display them, grayed out.

---

<div class="post-metadata">

**Author:** ![pradeepjanga](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@pradeepjanga](https://discuss.elastic.co/u/pradeepjanga)\
**Post date:** [October 6, 2021, 2:06pm UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961/3 "2021-10-06T14:06:45Z")

</div>

How did you implement session cookie thing for facets.  
Do you got an example on how to do that ?

Thanks  
Pradeep

---

<div class="post-metadata">

**Author:** ![reka.gay](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/reka.gay/32/91470_2.png) [@reka.gay](https://discuss.elastic.co/u/reka.gay)\
**Post date:** [October 6, 2021, 2:38pm UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961/4 "2021-10-06T14:38:19Z")

</div>

```auto
/**
 * Helper method to store facet values of a particular section (label) in session storage.
 * This is necessary because even with disjunctive facets 
 * Elastic will filter out facets of other groups that have no items to filter on,
 * leaving us with empty labels.
 * 
 * So, we will save the values into a session storage and display them, greyed out,
 * even when elastic would have filtered them out.
 * 
 * @param {Array} facets an array of facets within this group (label) as provided by elastic
 * @param {String} label the label for this facet section
 * @returns the values (individual checkbox names) of this facet section
 */
export function handleStorage(facets, label) {
    let values = [];
    if (Array.isArray(facets)) { // getting the current values from the provided facets
        facets.forEach((facet) => values.push(facet.value))
    }
    // window.sessionStorage.clear() // for debugging
    let storedValues = window.sessionStorage.getItem(SESSION_KEY);
    if (storedValues) {
        storedValues = JSON.parse(storedValues);
    }
    if (storedValues && storedValues.hasOwnProperty(label)) {
        // if we had values, and the values have this label, update just in 
        // case (found issue where it saved an empty array first)
        values = [...new Set([...values, ...storedValues[label]])];
        storedValues[label] = values;
    } else {
        if (storedValues) { // if we have stored values, just not this label, then add our current values
            storedValues[`${label}`] = values;
        } else {
            storedValues = { // if we don't have stored values at all, create the object
                [`${label}`]: values
            }
        }
    }
    window.sessionStorage.setItem(SESSION_KEY, JSON.stringify(storedValues))
    return values;
}

```

`SESSION_KEY` is just a string constant of your choice.

I have my own filter component that I created based on the original one from the react-search-ui-views, using the `withSearch` HOC with

```auto
withSearch(({ filters, facets, addFilter, removeFilter })

```

Then in the actual component....

```auto
  const facetsForField = facets[field];

  const facetValues = getSelectedFacetValues(
    facetsForField,
    filters,
    field,
    FILTER_TYPE
  );

  const storedFacets = handleStorage(facetValues, label);

```

Where `field` and `label` are props passed in.

Finally...

```auto
storedFacets.forEach(( value ) => {
  const available = facetValues.find((availableValue) => {
    return availableValue.value === value;
  });
  const disabled = available === undefined;
  const { count, selected } = available
    ? available
    : { count: "0", selected: false };
  rows.push(
    <Row key={`r-${value}`}>
      <Column lg={14} key={`c-${value}`}>
        <Checkbox
          onChange={() =>
            selected
              ? removeFilter(field, value, FILTER_TYPE)
              : addFilter(field, value, FILTER_TYPE)
          }
          key={value}
          labelText={value}
          checked={selected}
          disabled={disabled}
          title={
            disabled
              ? "Filter not available with the already selected options"
              : `Filter for ${value}`
          }
          id={`cb-${value.toLowerCase()}`}
        />
      </Column>
      <Column className={cx(counter)} lg={2} key={`cc-${value}`}>
        {count}
      </Column>
    </Row>
  );
});

```

We're using the carbon design framework.

Hope this helps

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 3, 2021, 2:38pm UTC](https://discuss.elastic.co/t/how-to-make-facets-stay-even-after-the-selection/285961/5 "2021-11-03T14:38:39Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.