TagField's value and dropdown selection not in sync with actual labels displayed

Open fabriciomurta opened this issue 4 years ago • 1 comments

Found: 5.3.0 Ext.NET forums' thread: [Tagfield component] Data values disappearing after mouse select

In the TagField, if tags are added by filtering the dropdown by "typing ahead" a few of the first characters of existing valid entries, then the field's value and dropdown selection are reset, whereas the actual tag selection is not.

Thus, it is possible to get the actual selection from the tagField via App.TagField1.tagLabel.tags, whereas App.TagField1.getValue or its picker's App.TagField1.getPicker().getSelectionModel().getSelected().items won't match the selection.

It seems like once the picker's store is filtered, it won't keep in its internal selection model any record that was selected from the non-filtered store -if- the selection changes when the store is filtered (by the typeAhead text on input).

All indicates this is an issue with the client-side (javascript) implementation of the component.

Apr 14 '21 18:04 fabriciomurta

Test case highlighting the different states

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>TagField - Ext.NET Examples</title>
    <script type="text/javascript">
        var getCurrentTagValue = function (cmp) {
            var tagField = cmp.up('nettagfield'),
                selection = [],
                pickerSelection = [];

            Ext.each(tagField.tagLabel.tags, function (tag) {
                selection.push(tag.text + " (" + tag.value + ")");
            });

            Ext.each(tagField.getPicker().getSelectionModel().getSelected().items, function (tag) {
                pickerSelection.push(tag.data.text + " (" + tag.data.value + ")");
            });

            Ext.toast("Values: <br />" +
                ".getValue() => " + tagField.getValue() + "<br />" +
                ".tagField.tags => " + selection.join(', ') + "<br />" +
                "(expand picker once to populate) :: .getPicker().getSelectionModel().getSelected().items => " + pickerSelection.join(', '));
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>TagField</h1>

        <h2>Basic</h2>

        <p>Custom values allowed, input can be moved with left/right arrows</p>

        <ext:TagField runat="server" ID="TagField1" Width="500" TypeAhead="true">
            <Tags>
                <ext:Tag Value="1" />
            </Tags>
            <RightButtons>
                <ext:Button runat="server" Icon="Database">
                    <Listeners>
                        <Click Fn="getCurrentTagValue" />
                    </Listeners>
                </ext:Button>
            </RightButtons>
            <Items>
                <ext:Tag Value="1" Text="George" Icon="User" />
                <ext:Tag Value="2" Text="Bob" Icon="UserAdd" />
                <ext:Tag Value="3" Text="John" Icon="UserAlert" />
                <ext:Tag Value="4" Text="Bill" Icon="UserB" />
                <ext:Tag Value="5" Text="Ronald" Icon="UserDelete" />
                <ext:Tag Value="6" Text="Albert" Icon="UserBrown" />
                <ext:Tag Value="7" Text="Batthory" Icon="UserComment" />
                <ext:Tag Value="8" Text="Bonny" Icon="UserComment2" />
                <ext:Tag Value="9" Text="Claide" Icon="UserCross" />
                <ext:Tag Value="10" Text="Claire" Icon="UserEarth" />
            </Items>
        </ext:TagField>
    </form>
</body>
</html>

Add some items and check the result in the right button next to the dropdown expander. Then type in bo and select either tag. The picker filter is dropped and selection (in picker) is not kept. Click again right-button in tag field and the different displays will not match.

Apr 14 '21 19:04 fabriciomurta