CODEWITHSUNDEEP
reactivesearch
florian norbert bepunkt
florian norbert bepunkt

Reputation: 2539

ReactiveSearch custom component and clear filters

I created a custom ReactiveComponent based on the official docs: https://docs.appbase.io/docs/reactivesearch/v3/advanced/reactivecomponent/

This works fine, however when I use the component and clear the filter of my custom component, how can I update the ui state of the custom component?

Using the example in the docs: When clearing the color filter, how can I update the ColorPicker UI state to reflect that no color is selected?

Haven't found anything related to this in the docs.

Upvotes: 0

Views: 461

Answers (3)

ls168
ls168

Reputation: 37

Currently I am using a few different ReactiveComponents from reactivesearch.

When I clear the filters it does not update the query, it clears the filter but not update the query.

Currently I am doing something like the following.

const query = {
      query: {
        match_all: {},
      },
    }
setQuery({query, value: null})

so I am setting up a sort of blank query and updating the value to null. This seems to work okay.

Upvotes: 0

Eren Kucuker
Eren Kucuker

Reputation: 11

If I understand clear you need to use value that coming via render prop.

Here is an example usage from my project

 render={({ data, handleChange, value }) => {
                return (
                  <div
                    role="listbox"
                    aria-label="SpecialCategoryFilter-items"
                    className="list-filter"
                  >
                    {data.map((item) => (
                      <p
                        className="button-large-item"
                        key={item.key}
                        role="option"
                        aria-checked={value[item.key] ? true : false}
                        aria-selected={value[item.key] ? true : false}
                      >
                        <input
                          style={{ display: "none" }}
                          type="checkbox"
                          value={item.key}
                          onChange={(e) => {
                            handleChange(e);
                          }}
                          id={"SpecialCategoryFilter-" + item.key}
                          name={"SpecialCategoryFilter-" + item.key}
                        />
                        <label
                          htmlFor={"SpecialCategoryFilter-" + item.key}
                        >
                          <span>{item.key}</span>
                        </label>
                      </p>
                    ))}
                  </div>
                );
              }}

Upvotes: 0

florian norbert bepunkt
florian norbert bepunkt

Reputation: 2539

In case anyone else encounters the same issue: The render props of include a value object which is set to null if you clear the filters. This way it is possible to conditionally update the ColorPicker UI state (or whatever custom component you use).

Upvotes: 0

Related Questions