Kendo-angular: AutoComplete | MultiSelect components

[valchev]

Q: What is the use case of the AutoComplete component in Angular applications?
Q: What features should the AutoComplete support - selection, multiple values (separator), suggestion?
Q: What should be the value of the AutoComplete component with separator - should it have a single value (string result) or array of selected dataItems? What should be the value if there is no separator - the valueField of the selected dataItem, the selected dataItem, array with one dataItem?

The problems that the two components are trying to solve are:

1. Selection of multiple values, where each selected value from the result is clearly separated. The user is able to remove or navigate through the items with ease.

1. Selection of huge amount of values with single click (select all). The component renders single tag with text "15 items selected" or "all items selected". Useful if the the developer wants inline component that does not take much space.

1. Selection from list of pre-defined values or/and custom values.

2. Quick typing, selection between filtered list of items and editing of the result string. Can be achieved if the result is displayed as string in input.

1. Word completion, a.k.a suggest for multiple values.

1. Creating a separated values string, for example creating a mailing list from string list of mail addresses.

2. Implementing some sort of search bar (single value only)

Anything else?

After offline discussion with @ggkrustev @tapopov and @KirilNN we came to the conclusion that 90% of the cases are covered by the MultiSelect component. It seems that the key difference between the two is the rendering mode of the selected items.

In Kendo UI Web the AutoComplete is designed as a simple widget that has a single value which does not work well with the MVVM binding concepts. Should we change the specification of the widget?

cc @tsvetomir @petyosi

[KirilNN]

cc @rusev @rkonstantinov

I would like to call for some activity here, as the deadline approaches.

@petyosi - what would be the 'min acceptance criteria' for the MultiSelect component?

[rusev]

I like to think about the AutoComplete for simpler component than the MultiSelect.

AutoComplete should always work with a _single string values_, while the MultiSelect should expect _array of items_. In that sense the MultiSelect is closer to the mutiple select.

[tsvetomir]

After an offline discussion with @rkonstantinov @rusev @ggkrustev and @valchev we came to the conclusion that the AutoComplete should behave like a text input with auto-completion. It binds to a text value that may or may not include separators.

If we decide to go the other way, the AutoComplete will not add any value over a MultiSelect.

[KirilNN]

As agreed we should support custom values. This raises a few questions and scenarios.

• Should we have allowCustom option? Or handle it by default, somehow?
• Do we show values that are not present in the bound data? Do we show values, when no data is actually present?
• Should we include value normalizer when each pill is created with custom value? Here the main problem might come from templates using non-existent values. Differs from the combobox - where the normalizer is called on change.
• Should we have consistent values - array of only string or objects, or we can have mixed values [{}, ""] for example. This can be handled by the normalizer, as well.

[valchev]

Should we have allowCustom option? Or handle it by default, somehow?

In my opinion the developer should explicitly say if custom values are allowed or not. This will eliminate the guessing on our end and will cover the cases when the developer does not want custom values.

Do we show values that are not present in the bound data?

Currently the DropDownList and ComboBox ([allowCustom]="false") ignore the values that are not present in the bound data. Having in mind the fact that we want to allow the developer to use the component with large amount of data via filtering (no virtualisation), we should be able to display values that are not present in the bound data.

• [data]="[<obj>]" + [(ngModel)]="[<obj>]" => display value tags
• [data]="[<string>]" + [(ngModel)]="[<string>]" => display value tags
• [data]="[<obj>]" + [(ngModel)]="[<number/string>]" + `[valuePrimitive]="true" => display warning / does not display values

If allowCustom is true the normaliser callback should be executed before the corresponding tag is being rendered. This will prevent potential errors in the tagTemplate.

Do we show values, when no data is actually present?

If we want to support the scenario where filtering happens after user types a few characters, we have to be able to display the values.

Should we include value normalizer when each pill is created with custom value? Here the main problem might come from templates using non-existent values. Differs from the combobox - where the normalizer is called on change.

Yes.

Should we have consistent values - array of only string or objects, or we can have mixed values [{}, ""] for example. This can be handled by the normalizer, as well.

If I am correct the question is related to the internal state of the component. If we call the valueNormalizer for each custom value before tags are rendered the internal value array should be filled with values of the same type.

[ggkrustev]

@valchev's comments answers pretty much most of the questions pretty well. I just want to clarify some of the statements.

• [data]="[]" + [(ngModel)]="[]" + `[valuePrimitive]="true" => display warning / does not display values

Probably we will need to choose the 'does not display values' approach here. Starting or ending up in a state where the primitive values cannot be found in the data is valid scenario and definitely could happen in production mode. In this case, warnings are useless.

If allowCustom is true the normaliser callback should be executed before the corresponding tag is being rendered. This will prevent potential errors in the tagTemplate.

I don't see any reason to call the value normalizer for every tag during rendering:

• component should render a tag only if the required data (text, value) is present.
• the structure of the selected values should be homogeneous. They should be either objects or primitive values, never mixed
• value normalizer is called to create new data entry. In all other cases, the component will conform with the 1st rule of this list

Should we include value normalizer when each pill is created with custom value?
No. The value normalizer is called only when a new data entry should be created. In all other cases, the required data to display should be available to the component in order to render the tags/selected items.

Should we have consistent values - array of only string or objects, or we can have mixed values [{}, ""] for example.
Yes

---

The only open question (at least to me) is how to support the "load on demand scenario" when selected values are of primitive type?

[WARNING] - cogitations below

One possible solution is to require to feed the component only with the selected data items. Consider the scenario:

[data]="[<obj>]" + [(ngModel)]="[<number/string>]" + [valuePrimitive]="true"

where the model has the following selected values [100, 200, 300]. I would like to be able to display the selected tags without feeding the multiselect with the all data (1000 items).

The obvious solution is to bind the multiselect only with the corresponding [{id:100}, {id:200},{id:300}] data items. This, however, has its own caveats...

@valchev, @KirilNN, we should research this a bit more.

[tsvetomir]

Both components are now shipping as part of the January RC release.

[ChrisProlls]

Great work here ! After integrating the AutoComplete component, one question :

• Do you plan to integrate the "_minLength_" param used before to throw the AutoComplete behavior only if the user has enter 3 characters (for exemple) ?

Thanks !

[valchev]

@ChrisProlls As opposite to jQuery Kendo widgets where the DataSource is responsible for filtering
the data, in Kendo Angular2 components the developer is in charge of the filter process.

To implement "minLength" behaviour, hook up to the filterChange event and do not update the components data property until the filter reaches certain length.

We will create a demo, but we have no plans to make this a built-in functionality since Kendo Angular2 DropDowns does not have DataSource.

[ChrisProlls]

I understand the fact that the developer is in charge of the filter process. Can he manage the opening of the popup that shows the results ? For example, I don't want to show the popup if the number of character is not corret.

[valchev]

@ChrisProlls this is not possible at the moment, we will discuss possible solutions and add patch for this limitation.

[ChrisProlls]

Thanks ! Currently we noticed some lags during the opening of a long suggestions list, so in our scenario we wanted to show the list only if the user entered 3 characters. I think this was the behavior of the JQuery versions of the component.