[6.2.0 Modern] Removing items from Carousel throws error on second remove

[ega04trt]

Ext version tested:

• Ext 6.2.0

Browser versions tested against:

• Chrome

Description:

• Removing items from Ext.carousel.Carousel throws an error on the second call to removeAt(idx).

Steps to reproduce the problem:

• Load the fiddle
• Scroll through the carousel to the end panel
• Scroll backwards through the carousel to the start. The carousel will 'pop' the last shown panel, like a 'stack' of panels.
• On the second call to removeAt(idx), an error will be thrown, breaking the app
• The error is: Uncaught TypeError: component.getId is not a function

[ega04trt]

Further to the above message, we think it may be caused by the following in Ext.container.Container:

doRemove: function(item, index, destroy) {
    var me = this;

    me.items.remove(item);

    if (item.isInnerItem()) {
        me.removeInner(item);
    }

    me.onItemRemove(item, index, destroy);

    item.onRemoved(item.destroying || destroy);

    if (destroy) {
        item.destroy();
    }
}

And the following from Ext.carousel.Carousel:

onItemRemove: function(item, index) {
    this.callParent(arguments);

    var innerIndex = this.getInnerItems().indexOf(item),
         indicator = this.getIndicator(),
         carouselItems = this.carouselItems,
         i, ln, carouselItem;

....

As you can see, the container removes the item from innerItems and then calls onItemRemove. This means the value of innerIndex in onItemRemove is always -1.

[evant]

Thanks for the report! I have opened a bug in our bug tracker.

[hongyuan]

@ega04trt : yes, innerIndex is always -1.

And as a temporary quick fix, one can set the undocumented config option bufferSize to 0:
{
xtype: 'carousel',
bufferSize: 0
}

Works for the fiddle and for my app, though may be at the expense of some performance.