Filter field: Second async call lets category disappear

[andular]

Bug Report

Expected Behavior

When the data is loaded async a second time the category should stay selected and only the autocomplete/suggestion values should change.

Current Behavior

The category vanishes and the filter field shows the new suggestions on the top level.

Steps to Reproduce

https://stackblitz.com/edit/github-9bfdsj

or

Use Barista example code for "Loading options asynchronously" and replace the following:

currentFilterChanged( event: DtFilterFieldCurrentFilterChangeEvent<any>, ): void { if (event.added[0] === this.DATA.autocomplete[0]) { // Emulate a http request setTimeout(() => { this._dataSource.data = this.ASYNC_DATA; }, 1000); // Emulate a second http request setTimeout(() => { this._dataSource.data = this.ASYNC_DATA; }, 3000); } }

Context (Environment)

We show a dashboard list which can be filtered for several categories. The owners list can get really long on big systems to we wanted to implement a server side filtering for it and load the suggestions async while typing. We did this by using a debounce time of 400ms. So the user started typing a few letters and gets suggestions as soon as he stops. This works fine but if he continues writing afterwards, a second async call will be made and this makes the 'Owner' category disappear.

APM-230713_Async_Owner_Suggestions_Issue.zip

[tomheller]

Hi @andular!
Thank you for reporting this. Here is the thing, if you are reloading a node for the datasource, it needs to be set to async again.
After your first load event, the Aut (async) option is no longer considered async, so when the second setTimout runs, you are merely overwriting the datasource.data with a sync version of the original dataset.

Right now, it is not possible to reload certain parts of the dataSource again asynchronously. If you want to load a selectable filter, all options should be there at once. If you want to change the dataSource, you will need to do that when filters are not in an intermediate state (reacting onto the filterChange event from the filter field).

The owners list can get really long on big systems to we wanted to implement a server side filtering for it and load the suggestions async while typing. We did this by using a debounce time of 400ms. So the user started typing a few letters and gets suggestions as soon as he stops.

The pattern you are describing here is currently not possible for the Filterfield (@thomaspink please correct me if I'm wrong and I missed something). You could use a workaround and use a freeText node with a suggestion box (but I guess you want to actually enforce a selection, rather than any string).

I do see the value of this though, and after @thomaspink confirms that this is rather a feature than a bug, I will convert the issue.

Nevertheless I'm going to add the help-wanted label onto it for now. @andular, if you would want to contribute a solution for this one.

[andular]

Hi @tomheller, thanks for the explanation!

[thomaspink]

@tomheller you are correct. this behaviour is currently not supported.

Right now we have 2 different approaches in place on how you can apply data.

1. If the currently selected autocomplete node has the async property set the data that has been sent to the filterfield via a data source is considered as the asnycronosly loaded and is used as the data in place of the currently selected node.
2. Otherwise if no async property is set, the data is considered as "new" and the filter field is reset and displays the new data as top level.

I already discussed with @ffriedl89 on introducing a new (3rd) variant on how to pass in data to extend the currently loaded/display data set. To provide such a functionality a new property on the autocomplete def has to be added, so we can detect that the incoming data should in fact extend the existing one and not replace it or reset the filter field.

-> Changed the issue type to feature

[thomaspink]

On the technical side (very simplified), the third variant has to be added here:
https://github.com/dynatrace-oss/barista/blob/master/libs/barista-components/filter-field/src/filter-field.ts#L1081

Currently we have something like this in place:

if (isAsyncDtAutocompleteDef(currentDef)) {
  // Handle data as async
} else {
  // Handle data as new, reset FF
}

A third option needs to be added:

if (isAsyncDtAutocompleteDef(currentDef)) {
  // Handle data as async
} else if(isPartialDtAutocompleteDef(currentDef) {
  // Handle data as partial data and extend existing one
} else {
  // Handle data as new, reset FF
}

and in the AutocompleteDef itself we need a new property (maybe calling it partial) here:
https://github.com/dynatrace-oss/barista/blob/master/libs/barista-components/filter-field/src/types.ts#L46

[christian-fischer]

@thomaspink we have a very similar usecase as @andular
(async loading of tags, result filtered on server)
I will prepare a PR for this change you proposed.