Swipe two container generate only one on-swipe event (2 expected)

[jmorille]

Description

Swiping 2 iron-swipeable-container element in the same action throw only 1 iron-swipe event.
In the

Expected outcome

Each container swiped should throw a iron-swipe event in order to manage the

That throws one event per iron-swipeable-container swiped in order per exemple to remove each item removed and have a correct total computed quantity.

Actual outcome

Two container are destroy and only one event are throwed.
In consequence, it is not possible to remove the second wiped container from an array

Live Demo

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../iron-list/iron-list.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">

<link rel="import" href="../iron-swipeable-container/iron-swipeable-container.html">


<!--
`bug-multiswipe-singleevent`
Polymer Bug Swipe Demonstration

@demo demo/index.html 
-->

<dom-module id="bug-multiswipe-singleevent">
    <template>
        <style is="custom-style" include="iron-flex iron-flex-alignment">
            :host {
                display: flex;
                flex-direction: column;
                height: 200px;
            }

            iron-list {
                flex: 1 1 auto;
                margin-top: 10px;
            }

            iron-list {
                --iron-list-items-container: {
                    margin: 1px;
                };
            }

            .itemContainer {
                @apply(--layout-horizontal);
            }

            .totalContainer {
                @apply(--layout-horizontal);
            }

            .swipe {
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                cursor: default;
            }

        </style>
        <div class="totalContainer">
            <div class="flex">Total</div>
            <div>[[total]]</div>
        </div>
        <iron-list id="list" items="[[items]]" as="item">
            <template>
                <iron-swipeable-container  on-iron-swipe="_handleSwipe">
                    <div class="itemContainer swipe" tabindex$="[[tabIndex]]">
                        <div class="flex">[[item.name]]</div>
                        <div>[[item.quantity]]</div>
                    </div>
                </iron-swipeable-container>
            </template>
        </iron-list>


    </template>

    <script>
        Polymer({

            is: 'bug-multiswipe-singleevent',

            properties: {
                items: {
                    type: Array,
                    value: function () {
                        return this.generator(5);
                    },
                    notify: true
                },
                total: {
                    type: Number,
                    computed: '_computeTotalAmount(items.*)',
                    notify: true
                }
            },


            generator: function (size) {
                var arr = [];
                for (var pas = 1; pas <= size; pas++) {
                    arr.push({
                        id: pas,
                        quantity: Number((10 * Math.random()).toFixed(0))+1,
                        name: 'Item Num ' + pas
                    });
                }
                return arr;
            },

            _computeTotalAmount: function (itemsEvent) {
                console.log('compute total with event',  itemsEvent);
                var items = itemsEvent.base;
                var totalPrice = items.reduce(function (acc, item) {
                    acc = acc + item.quantity;
                    //console.log('acc ', acc, 'with add quantity', item.quantity);
                    return acc;
                }, 0);
                return totalPrice;
            },


            _handleSwipe: function (e) {
                console.log("Handle Swipe", e);
                this.splice('items', e.model.index, 1);
            }

        });
    </script>
</dom-module>

Steps to reproduce

1. Swipe two element with the same finger. ex "Item num 3"
2. In the console only one event is throwed is logger
3. and the total become wrong because two item are destroy but only one was remove from the array

Browsers Affected

• [X ] Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10