Bug: unselect an item doesn't change the state.selected in function templateResult(state)

[ikhvjs]

If initialize an select 2 object like below, when we unselect an item, the state.selected of that item in the templateResult is still true.

const data = [
    {
        text: "Group 1",
        children: [
            { id: 1, text: "Option 1.1" },
            { id: 2, text: "Option 1.2" },
        ],
    },
    {
        text: "Group 2",
        children: [
            { id: 3, text: "Option 2.1" },
            { id: 4, text: "Option 2.2" },
        ],
    },
];

$("select").select2({
    width: "80%",
    data: data,
    templateResult: function (state) {
        console.log(state);
        // hide options if it is selected.
        if (state && !state.selected) {
            return $(`<span>${state.text}</span>`);
        }
        return null;
    },
});

test version: select2@4.1.0-rc.0
demo link: https://jsbin.com/tikemivicu/edit?html,js,console,output

[kevin-brown]

So this issue appears to be closely linked to #6128 since both of them only appear when the id is not a string.

[ikhvjs]

@kevin-brown , I also tested the data with id in string with the demo link above. The issue can still be reproduced.

[jayaddison]

This only seems to be a problem when using multiple-select mode and when using option groups (as with Group 1 and Group 2 in the example).

The cause seems to be something cache-related; removing this cache lookup restores correct behaviour (but may not be the correct fix).