Combo item list in Widget Column not opening when assigning state

[taauntik]

Forum post

In example: https://bryntum.com/products/grid/examples/state/

When using below code snippet, the combo box's item list doesn't open.

Working Conditions: If the listener configuration is removed from combo.picker, the item list opens correctly. If the state is not assigned to the widget, the item list also opens correctly.

Important Note: To reproduce this issue, you need to save a state first.

import { AjaxHelper, AsyncHelper, Grid, Toast, DataGenerator, StateProvider } from '../../build/grid.module.js?478494';
import shared from '../_shared/shared.module.js?478494';

const appRoles = [
    {
        "id": 1,
        "name": "Administrator",
    },
    {
        "id": 2,
        "name": "Executive",
    }
]

const stateId = 'mainGrid';

function launch() {
    const grid = new Grid({
        appendTo : 'container',

    // The key used to automatically save this widget's state in the page's state provider
    // stateId,

    features : {
        filter       : true,
        group        : false,
        regionResize : true
    },

    columns : [
        // To persist column state, we specify an id
        { id : 'first_name', text : 'First name', field : 'firstName', width : 180, locked : true },
        { id: "widget-column", text: "Widget Column", type: "widget", widgets: [] },
        { id : 'surname', text : 'Surname', field : 'surName', width : 180, locked : true },
        { id : 'age', text : 'Age', field : 'age', width : 100, type : 'number' },
        { id : 'city', text : 'City', field : 'city', width : 180 },
        { id : 'food', text : 'Food', field : 'food', width : 180 },
        { id : 'color', text : 'Color', field : 'color', width : 180 }
    ],

    data : DataGenerator.generateData(50),

    tbar : [
        {
            type  : 'checkbox',
            ref   : 'autoSaveCheckbox',
            label : 'Auto save',
            value : true,
            onChange({ checked }) {
                grid.stateId = checked ? stateId : null;
            }
        },
        {
            type    : 'button',
            ref     : 'resetButton',
            color   : 'b-red',
            icon    : 'b-fa b-fa-times',
            text    : 'Reset to default',
            tooltip : 'Resets application to the default state',
            onAction() {
                grid.resetDefaultState();

                grid.saveState();

                Toast.show('Default state restored');
            }
        }
    ]
});
const widgetColumn = grid.columns.getById("widget-column");
widgetColumn.widgets = [{ 
    type: "combo",
    items: appRoles,
    idField: "id",
    displayField: "name",
    flex: 1, 
    picker: { 
        listeners: { 
            beforeItem(e) {
                console.log("===beforeItem===", e);
            }
        } 
    }
}]
console.log("assigning state", stateId)
    grid.stateId = stateId;
    grid.state = StateProvider.instance.getValue(stateId)
}

StateProvider.setup('local');
launch();