Sidebar resource list not matching resource store of Calendar

[marciogurka]

Forum post

Using the basic Calendar demo, updating the resources from data to this (just to add an example resource)

"resources"  : {
        "rows" : [
            {
                "id"         : "bryntum",
                "name"       : "Bryntum team",
                "eventColor" : "blue"
            },
            {
                "id"         : "hotel",
                "name"       : "Hotel Park",
                "eventColor" : "orange"
            },
            {
                "id"         : "michael",
                "name"       : "Michael Johnson",
                "eventColor" : "deep-orange"
            },
            {
                "id"         : "example",
                "name"       : "example",
                "eventColor" : "red"
            }
        ]
    }

And then, update the eventStore listeners like this

import '../_shared/shared.js'; // Adds example page chrome
import Calendar from '../../lib/Calendar/view/Calendar.js';

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        autoLoad   : true,
        eventStore : {
            listeners : {
                add : ({ records }) => {
                    calendar.resourceStore.add({ name : 'example2', id : 'example2' });
                    const example2Resource = calendar.resourceStore.records.filter(
                        ({ name }) => name === 'example2'
                    );
                    console.log('calendar.resourceStore.records', calendar.resourceStore.records);
                    console.log('example2Resource', example2Resource);
                    calendar.resourceStore.remove(example2Resource);
                    const exampleResource = calendar.resourceStore.records.filter(
                        ({ name }) => name === 'example'
                    );
                    console.log('calendar.resourceStore.records', calendar.resourceStore.records);
                    console.log('exampleResource', exampleResource);
                    calendar.resourceStore.remove(exampleResource);
                }
            }
        }
    },

    appendTo : 'container',

    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        eventTooltip : {
            // Configuration options are passed on to the tooltip instance
            // We want the tooltip's left edge aligned to the right edge of the event if possible.
            align : 'l-r'
        }
    }
});

The idea is that the resources list on the left of the calendar should have only 3 resources, as we're removing all the examples resources.

Checking the store and the console.logs, the data there is correct, we only have 3 resources, but in the UI we still have the 2 examples resources (check the attached screenshot)

[ExtAnimal]

This is some strange "Engine" artefact. The Store's change event from the remove is not being fired. These events come from the async commit. The add comes through, the remove doesn't. Probably Arcady might know what's happening.

[ExtAnimal]

This patch in ResourceFilter.js works around it, but I can't say if its the solution or a band aid round a real bug: