Virtual tile list doesn't remove click handlers on re-used tiles after resize

[triggi]

I'm using a virtual tile list, and inside every tile there is a number of buttons. In `configureTile` I set click handlers on these buttons (which thus are sub-elements of the tile itself).

When a tile gets recycled (ie after changing the size of the list) these click-handlers are still attached. A new one gets attached (since addEventListener adds, not replaces, a click-handler) and when I then click the button both the old and the new handlers are fired.

I'm not sure this should really be called a bug, but it's definitely unexpected.

This hopefully illustrates the problem (and my workaround):

buttonsList.delegate = {
   getTileInfo: (index) => {
      return {
         type: 'button',
         data: buttons[index],
      };
   },
   configureTile: (tile, info) => {
      const {type, data} = info;
      if (type === 'button') {
         for (let column = 0; column < data.length; ++column) {
            const buttonEl = tile.getElementById(`button-${column}`);
            if (buttonEl._eventListener) {
               console.log('already had eventListener');
               buttonEl.removeEventListener('click', buttonEl._eventListener);
            }
            buttonEl._eventListener = () => {
               doSomething(data[column]);
            };
            buttonEl.addEventListener('click', buttonEl._eventListener);
         }
      }
   },
};

On the console, when changing the tiles:

[13:12:39] App: already had eventListener (app/index.js:47,10)
[13:12:39] App: already had eventListener 

[JonFitbit]

Thanks for sharing this.