Angular-Slickgrid Select or Multiselect dropdown Flickers(gets closed automatically) on first Click

Question

Following is the code that I am using

1.I add a new row in angular slickgrid table with below code const newItem = { id: this.dataset.length + this.index, roleName: '' };

// add the item to the grid
this.angularGrid.gridService.addItem(newItem);

2. Following is the column Defination

this.columnDefinitions = [ { id: 'roleName', name: 'Role *', field: 'roleName', sortable: true, type: FieldType.string, filterable: true, width: 80, editor: { model: Editors.singleSelect, enableRenderHtml: true, collection: ['1','2', '3'], placeholder: 'choose an option', collectionSortBy: { property: 'label' }, } } ]

3.GridOptions are:

this.gridOptions = { enableAutoResize: true,
enableCellNavigation: true, editable: true, autoEdit: true, enableColumnPicker: true, };

But Can see When I add a new row in table and if I quickly click on the select element then it opens a dropdown for fraction of seconds then it automatically getting closed.

Answer 1

Note that I'm the author of Angular-Slickgrid and I have already replied to the GitHub issue that you opened for the same question here. The answer will be the same as shown below

That happens because you're using the addItem from the Grid Service, it highlights the inserted row for 1.5 sec and it does that by adding a css class to the row for 1.5 sec and then removes it once the highlight is over (there's an extra css animation on it) and when it does that it will remove focus from any open editor. The real reason is that once the highlight it over, after 1.5 sec, it calls a re-render of the grid (via invalidate) and because it re-render the entire row it removes the editor.

So if you don't like that behavior, then you can simply remove the highlight via the following option

this.angularGrid.gridService.addItem(newRows[0], { highlightRow: false });