# Calification on how Disjunctive Facets work

**URL:** <https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [May 25, 2023, 6:54pm UTC](https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364 "2023-05-25T18:54:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Brandenburg](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/john_brandenburg/32/117741_2.png) [@John\_Brandenburg](https://discuss.elastic.co/u/John_Brandenburg)\
**Post date:** [May 25, 2023, 6:54pm UTC](https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364/1 "2023-05-25T18:54:45Z")

</div>

I'm trying to set up a disjunctive facet to provide options for an "OR" filter rule. As in, when I have multiple values in the facet group selected, it returns documents that match one, OR the other.

But out of the box, when I am using this recommended onChange handler:

```auto
onChange={() => onChange(value, !checked)} 

```

It forces only one selection at a time. I was able to figure out how to make it allow multiple selections, however, when I do have multiple selections, I get zero results. I assume that despite being a disjunctive facet, it is using an AND condition for the filters.

Now I am questioning my assumption that this is even possible. Is what I am describing here the intended behavior for a disjunctive facet? Do they only force one selection, and prevent multiple selections?

---

<div class="post-metadata">

**Author:** ![Sander\_Philipse](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/sander_philipse/32/101890_2.png) [@Sander\_Philipse](https://discuss.elastic.co/u/Sander_Philipse)\
**Post date:** [May 31, 2023, 1:06pm UTC](https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364/2 "2023-05-31T13:06:28Z")

</div>

Hi @John_Brandenburg, I'm a little unclear on what you're working with. Are you using Search UI? If so, you should be following [this documentation](https://docs.elastic.co/search-ui/api/react/components/facet) on implementing disjunctive facets. If not, can you give us a little more info on what you're trying to accomplish, using what technology?

---

<div class="post-metadata">

**Author:** ![John\_Brandenburg](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/john_brandenburg/32/117741_2.png) [@John\_Brandenburg](https://discuss.elastic.co/u/John_Brandenburg)\
**Post date:** [May 31, 2023, 9:35pm UTC](https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364/3 "2023-05-31T21:35:52Z")

</div>

I am using the Search UI. I was trying to set up a facet that allowed multiple selections, but it was only allowing one filter at a time, despite being tagged as disjunctive. So the reason for my post was to clarify whether this is the expected behavior, or if I have screwed something up, which is a good possibility, as I had implemented a custom facet to handle some other use cases.

However, by requirements have actually changed since posting this, and I no longer need to set up this facet. But for posterity, here was the code for my custom facet:

```auto
import React from "react";
import { appendClassName, getFilterValueID } from "./helpers";
import type { FieldValue } from "@elastic/search-ui";

/**
 * Use this function to override facet value labels.
 */
function getFilterValueDisplay(filterValue) {
    let label = filterValue;
    if (filterValue === "page") {
        label = "Page";
    }
    else if (filterValue === "post") {
        label = "Post";
    }
    ...truncated
    return label;
}

const CustomFacet = ({
                         className,
                         label,
                         onMoreClick,
                         onChange,
                         options,
                         showMore,
                         showSearch,
                         onSearch,
                         searchPlaceholder,
                     }) => (

    <fieldset className={appendClassName("sui-facet", className)}>
        <legend className="sui-facet__title">{label}</legend>

        {showSearch && (
            <div className="sui-facet-search">
                <input
                    className="sui-facet-search__text-input"
                    type="search"
                    placeholder={searchPlaceholder || "Search"}
                    onChange={(e) => {
                        console.log('onchange');
                        console.log(e);
                        onSearch(e.target.value);
                    }}
                />
            </div>
        )}

        <div className="sui-multi-checkbox-facet">
            {options.length < 1 && <div>No matching options</div>}
            {options.map((option) => {
                const isBanned = function (filterValue) {
                    const banList = ["slideshow", "webform", "event", "publications"];
                    for (var i = 0; i < banList.length; i++) {
                        if (banList[i] == filterValue) return true;
                    }
                };

                if (isBanned(option.value)) {
                    console.log('banned');
                    return;
                }

                const checked = option.selected;
                const value = option.value;

                return (
                    <label
                        key={`${getFilterValueID(option.value)}`}
                        htmlFor={`example_facet_${label}${getFilterValueID(option.value)}`}
                        className="sui-multi-checkbox-facet__option-label">
                        <div className="sui-multi-checkbox-facet__option-input-wrapper">
                            <input
                                data-transaction-name={`facet - ${label}`}
                                id={`example_facet_${label}${getFilterValueID(option.value)}`}
                                type="checkbox"
                                className="sui-multi-checkbox-facet__checkbox"
                                checked={checked}
                                onChange={() => onChange(value, !checked)} // Update the callback here
                            />
                            <span className="sui-multi-checkbox-facet__input-text">
                                {getFilterValueDisplay(option.value)}
                            </span>
                        </div>
                        <span className="sui-multi-checkbox-facet__option-count">
                            {option.count.toLocaleString('en')}
                        </span>
                    </label>
                );
            })}
        </div>

        {showMore && (
            <button
                type="button"
                className="sui-facet-view-more"
                onClick={onMoreClick}
                aria-label="Show more options"
            >
                + More
            </button>
        )}
    </fieldset>
);

export default CustomFacet;

```

---

<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:** [June 28, 2023, 9:36pm UTC](https://discuss.elastic.co/t/calification-on-how-disjunctive-facets-work/334364/4 "2023-06-28T21:36:24Z")

</div>

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