# Data plugin search bar on filter removal doesn't refresh automatically

**URL:** <https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502>\
**Category:** Kibana\
**Created:** [January 8, 2021, 6:58am UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502 "2021-01-08T06:58:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\
**Post date:** [January 8, 2021, 6:58am UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502/1 "2021-01-08T06:58:33Z")

</div>

Hi Team,

I am using data plugin for elastic queries. In my project i have used kibana search bar as below

```auto
<navigation.ui.TopNavMenu
      appName={PLUGIN_ID}
      showSearchBar={true}
      useDefaultBehaviors={true}
      indexPatterns={indexPattern ? [indexPattern] : undefined}
      onQuerySubmit={(payload) => onRefreshClick(payload)}
      onFiltersUpdated={(filters) => refresh(filters)}
      onQueryChange={(payload) => refresh(payload)}
    />

```

In project if i have to add any filter on item click I am using below code

```auto
const patternIndex = props.indexPattern;
const filterType = FILTERS.PHRASE;
const newFilter = buildFilter(patternIndex, patternIndex.getFieldByName(filterField), filterType, true, false, filterVal, null, FilterStateStore.APP_STATE);
props.data.query.filterManager.addFilters(newFilter);

```

But when I remove the applied filter i have to hit refresh button in search bar to reflect the changes.

Can you guys help me out so that on removal of added filter the page should automatically reload. How can I catch filter removal event to the same.

Regards  
Praveer.

---

<div class="post-metadata">

**Author:** ![Liza\_Katz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/liza_katz/32/52358_2.png) [@Liza\_Katz](https://discuss.elastic.co/u/Liza_Katz)\
**Post date:** [January 12, 2021, 2:32pm UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502/2 "2021-01-12T14:32:21Z")

</div>

Hi there [praveer](https://discuss.elastic.co/u/praveer)

I have tested this behavior using your filter creation logic, on our latest `master` branch, and it seems to work properly. Filters are being added and removed from the `SearchBar` when you add them via the service, without having to refresh it explicitly.

If you're running Kibana from our source code, I've [pasted a git patch](https://pastebin.pl/view/684e2429) you can apply to your code to see what I did.

Please let us know if it helps or if you're using a much older version of Kibana where things behave differently.

Liza

---

<div class="post-metadata">

**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\
**Post date:** [January 14, 2021, 1:21pm UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502/3 "2021-01-14T13:21:55Z")

</div>

Hi Liaz,

Thanks for the help but it's not working.  
As in my application I have added search bar in app.tsx and I am passing data plugin as parameter to child component as below

```auto
<Route path={http.basePath.get() + "/app/correlationApp/correlationrule"} exact
          render={(props) => (<CorrelationRule http={http} data={data} savedObjectsClient={savedObjectsClient} indexPattern={indexPattern} mngBrdCrmbs={mngBrdCrmbs} query={propQuery} startDate={propStartDate} endDate={propEndDate} globalFilters={globalFilters} listAlerts={listAlerts} updateAlerts={updateAlerts} />)} />

```

Then in child component I am adding filter like this

```auto
const patternIndex = props.indexPattern;
const filterType = FILTERS.PHRASE;
const newFilter = buildFilter(patternIndex, patternIndex.getFieldByName(filterField), filterType, true, false, filterVal, null, FilterStateStore.APP_STATE);
props.data.query.filterManager.addFilters(newFilter);

```

And once filter is added in useEffect I am checking whether props.data has changed to refresh the component as below

```auto
useEffect(() => {
		setStartDate(props.startDate);
		setEndDate(props.endDate);
		setQuery(props.query);
		setShowTrigTimeChart(false);
		setShowAckTimeChart(false);
		setShowUnAckTimeChart(false);
		setShowTimeChart(false);
		setShowPieChart(false);
		setShowAlertList(false);
		console.log("Perms in Correlation rule: ", props.listAlerts);
		const setDefaultIndexPattern = async () => {

			await props.data.indexPatterns.getIdsWithTitle().then((resp) => {
				const indexIdCount = resp.length;
				if (indexIdCount > 0) {
					const correlationPattern = resp.filter(item => item.title === "correlation-*")
					if (correlationPattern.length > 0) {
						getIndexpattern(correlationPattern[0].id)
					} else {
						// createIndexPattern();
					}
				} else {
					// createIndexPattern();
				}
			});
		};
		// setDefaultIndexPattern();
		setPatternIndex(props.indexPattern);
		fetchData();
	}, [props.indexPattern, props.startDate, props.endDate, props.query, props.data, props.data.query, props.listAlerts, props.globalFilters]);

```

So once filter is added child component refreshes. Now how can I refresh the child component on filter removal. How to update data.filter on filter removal.

Regads  
Praveer

---

<div class="post-metadata">

**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\
**Post date:** [January 25, 2021, 5:41am UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502/4 "2021-01-25T05:41:46Z")

</div>

Hi @Liza_Katz,

I have also tried following approach to get update on filter add and remove.

```auto
data.query.filterManager.getUpdates$().pipe(first()).subscribe(() => {
  console.log("data filter change hit app");
});

```

But this is getting executed 19 times, to make it execute just single time I also tried using promise as below

```auto
data.query.state$.pipe(first()).subscribe(() => {
    console.log("First");
      getFilterUpdate();
  })

  const getFilterUpdate = async () => {
    await data.query.filterManager.getUpdates$().toPromise().then(() => {
      console.log("Promise");
      promiseExec = true;
    })
  }

```

But promise didn't execute. Can you please help me out on how to subscribe this observable only once.

Regards  
Praveer.

---

<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:** [February 22, 2021, 5:41am UTC](https://discuss.elastic.co/t/data-plugin-search-bar-on-filter-removal-doesnt-refresh-automatically/260502/5 "2021-02-22T05:41:47Z")

</div>

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