[OPEN] [#1856] [Tagfield component] Data values disappearing after mouse select

[tcunha]

Hi,

I am using the tagfield component on my project to select a list of countries and save them on my database.

Html.X().TagField()
    .ID("CountriesField")
    .FieldLabel("Countries")
    .LabelAlign(LabelAlign.Right)
    .ForceSelection(true)
    .Editable(true)
    .Listeners(l => {
          l.BeforeSelect.Fn = "onCountriesSelect"; // Currently, this function does nothing
          l.BeforeDeselect.Fn = "onCountriesDeselect"; // Currently, this function does nothing
    })
    .InputMoving(true)
    .CreateNewOnEnter(false)
    .EmptyText("Select at least one country")
    .Items(ViewBag.Countries as string[]) // All the countries 
    .SelectedItems(ViewBag.SelectedCountries as string[]) // All the selected countries

However, I have noticed the following behaviour whenever I select a new country:

1. If I select it with the keyboard, everything works as expected and the new country is added to the selected items.
2. If I type something to filter my list of countries and then select it with the mouse, then the tagfield behaves in a strange way and only saves the last country that I selected, erasing all the other previously selected countries. Note: I've noticed that this happens only if I type something to filter my list of countries.

For example:

If my tagfield already has "Spain" in the selected items, and I select a new country "France" and check for the values with App.CountriesField.getValue():

1. In the first case, it will return ["Spain", "France"].
2. In the second case, it will return only ["France"].

I found that the behaviour described on my second point also happens on the first example you provide in https://examples5.ext.net/Examples/F...=1575504000440.

In addition, as I was checking for a possible solution, I've added two new listeners for the following events: "BeforeSelect" and "BeforeDeselect" to check what my values were. However, whenever I select a new country, both this events are fired multiple times. I wonder if these two issues could be related at all. For the second problem, I know there is already an open thread https://forums.ext.net/showthread.php?57551. For the first one, I've found nothing.

Is there any solution or a work around for these two problems?

[fabricio.murta]

Hello @tcunha!

I can't reproduce the issue you are talking about in the Ext.NET Example you pointed. Is there any further information you can provide that may help reproducing the scenario? Specific browser or device, maybe?

I am not getting the list of tags emptied if I type part of a valid tag name and click down the dropdown list of tags it shows.

Looking forward to your follow-up!

[tcunha]

Hello @fabricio.murta,

I have reproduced the following steps both on Chrome and on Firefox:

1. Go to https://examples5.ext.net/Examples/F...=1575504000440
2. Open the DevTools and run "App.ctl05.getValue()" to get the array of values in the "Basic" example. Verify that the result is ["1"] corresponding to the George tag
3. Type "b" and select with your mouse (not with the keyboard) "Bob". Now there should be George and Bob inside the tagfield.
4. Run the "App.ctl05.getValue()" command again and verify that the result is ["2"] instead of ["1", "2"].

Please, let me know if you can replicate this.

[fabricio.murta]

Hello again @tcunha! Sorry for the long delay in replying the last post you made.

I have looked up the component and indeed the scenario you described is reproducible.

It happens that the getValue() method is just inherited from another component and was not properly synced up with the actual behavior of the tag field, and it was probably never expected since conception of the component, as the actual tag selection sits in (following your component path) App.ctl05.tagLabel.tags. I believe you should be safe to rely on this handle to get the actual selection of tags.

It is still a problem though, and probably the getValue() should be overridden to properly fetch the selection of tags in the component; also the dropdown's current selection should be kept in sync with the tag labels displayed by the field.

Basically what happens now is, if you filter the dropdown (which gets aits own store) and update the selection based on that dropdown filtered store, then the selection in the dropdown (as well as the field's "raw value") is affected. But as we can see, the actual selection in spite of the tag labels added to the field is not affected.

I have logged issue #1856 to track this problem, unfortunately there's no simple override to actually fix this issue as far as we know. But the workaround of relying in the actual tagLabel subcomponent should do for the long run (even after a proper synchronism of the subcomponents is implemented).

Hope this helps!

[tcunha]

Hello @fabricio.murta,

I've tried what you've suggested and it works as expected. I'll be using the tagLabel from now on.

Thank you for your response and explanation!

[fabricio.murta]

Glad it helped, thanks for the feedback!