Polymer 1.5/iOS: How to stop event propagation over iron-pages

Question

We have a one page app which uses iron pages and express-router to navigate. In the browser and on android it works perfectly, on iOS however, we have a bug. The problem occurs if we switch pages by a button press. If the button is exactly over an input text field element (read: in the same position, but on the next iron-page) the input element gains focus directly after the page switch.

We used to have this problem as well with two buttons in the same position but this was solved by changing all on-clicks to on-taps.

Things we have tried so far:

• Adding event.stopPropagation to the on-tap event
• Including fastclick.js to prevent click delays (this worked partially when on-clicks were still in place but was made obsolete with on-tap)

Note that we have experienced this problem since Polymer 1.0 all through 1.5.

Answer 1

Thanks @tony19, for the input.

We wanted to avoid delays, so I researched a bit more and ultimately fixed the problem. To answer my own question: the ultimate solution did lie in the FastClick library.

Basically what happens is that the tap event is fired immediately, but it doesn't replace the click event. Rather, the click event still fires, but with the original 300ms delay. This delayed click event thus fires on the newly displayed 'page' and triggers the input-field (or button had it been there) at the same x-y coordinates.

Adding the FastClick library once again solves this thanks to some updates in the library. However, it breaks some items that need the original click, such as Google Autocomplete. A basic solution to exclude FastClick is to instead apply it as:

FastClick.attach(document.body, {
    excludeNode: 'something', });

This, however, only works for that node and not possible children. As such, to fix everything for input fields with Google's Autocomplete as well is done using:

// Disable FastClick for the children of a google auto-
// complete component.
var needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function(target) {
    if ( (target.className || '').indexOf('pac-item') > -1 ) {
        return true;
    } else if ( (target.parentNode.className || '').indexOf('pac-item') > -1) {
        return true;
    } else {
        return needsClick.apply(this, arguments);
    }
};

// Remove click delay on iOS. As such, removing differences
// in timing between click and tap, thereby avoiding the
// fall-through problem.
FastClick.attach(document.body);

I will now close this thread, but I thought it'd be nice to leave this as reference for anyone else experiencing the problem.