Preventing Event Bubbling in Polymer 1.5 for iOS When Using iron-pages

Our single-page app utilizes iron pages and express-router for navigation. While it functions flawlessly on browsers and Android devices, we've encountered a bug when using iOS. The issue arises when switching pages by clicking a button. If the button is positioned directly over an input text field (on the subsequent iron page), the input element automatically gains focus after the page transition.

Previously, we faced a similar problem with two buttons overlapping at the same position. This was resolved by replacing all on-click events with on-tap events.

Here are some of the solutions we have attempted:

  • Implementing event.stopPropagation in the on-tap event
  • Using fastclick.js to prevent click delays (this solution worked partially until on-click events were replaced with on-tap)

It's worth noting that this issue has persisted from Polymer 1.0 through 1.5.

Answer №1

Your symptoms were replicated on an iPad Air 2, but attempts to use e.stopPropagation(), e.preventDefault(), and returning false had no impact. It remains uncertain whether this issue is related to Polymer.

During a page switch, there are a couple of makeshift solutions that can be implemented:

  • Option 1: Introduce a 400ms delay before the page-change. If your button includes a ripple effect, the delay may go unnoticed due to the animation.

    Check out codepen example

  • Option 2: Temporarily disable the input and then enable it again after a 400ms delay. This strategy prevents the input from registering the tap event, although the disabled state could be visible (potentially better than the current issue).

    View codepen demonstration

Answer №2

Appreciation to @tony19 for the valuable input.

In order to prevent any delays, I conducted further research and successfully resolved the issue on my own. To provide an answer to my initial query: the ultimate solution was found within the FastClick library.

The issue at hand is that the tap event is triggered instantly, yet it does not replace the click event. Instead, the click event still occurs, but with the original 300ms delay. This delayed click event then activates the input-field (or button if present) at the same x-y coordinates on the newly displayed 'page'.

Incorporating the FastClick library once again resolves this matter thanks to some recent updates in the library. However, it disrupts certain elements that require the original click functionality, such as Google Autocomplete. A simple workaround to exclude FastClick is by implementing it as follows:

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

This method only applies to that specific node and not its potential children. Consequently, rectifying everything for input fields in conjunction with Google's Autocomplete feature can be achieved through the following code snippet:

// Disabling FastClick for the descendants of a google autocomplete 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);
    }
};

// Eliminating click delay on iOS. By doing so, eradicating disparities
// in timing between click and tap events, thus averting the
// fall-through scenario.
FastClick.attach(document.body);

I am now concluding this discussion, but I believe leaving this information here could serve as a helpful guide for others encountering a similar issue.

Answer №3

It was noticed that there was an issue with Polymer versions 1.0 through 1.5. However, after testing in Polymer 1.6, we found a solution to the problem.

_onTap: function(event) {
    event.preventDefault();
    event.stopPropagation();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to use Javascript to determine if a string within a JSON object has been altered?

I am looking for a way to continuously monitor changes in a specific string or date stored in a JSON file. How can I effectively store this value and create a mechanism to compare it for any differences? Any assistance would be highly appreciated. // Ex ...

Can data from an Angular app be accessed by an external JavaScript code within the same project?

I've been thinking about a theoretical scenario that luckily I haven't encountered yet. Imagine I have an Angular Project compiled in My PROJECT FOLDER. <br/> Inside this PROJECT FOLDER, there's another JAVASCRIPT FILE external to ...

Step-by-step guide to initializing a project using React with Typescript and a functional server-side script

I am working on a project that involves a React Typescript app (created using Create React App). In this project, I need to have an executable script that can run alongside the React app. Both the app and the script are intended to only run on local machin ...

Using Javascript to retrieve a variable and dynamically updating the source of an HTML iframe

I have two JavaScript variables, 'long' and 'lat', in the code below. My challenge is to append these values to the end of the iframe URL. I would appreciate assistance on modifying the code below to achieve this. The iframe code bel ...

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

Issues with JavaScript causing YouTube embed player to malfunction

For the past few days, I've encountered an issue where my JavaScript code to embed YouTube videos isn't working properly. The video loads but it's not playable as the play button is unresponsive. The console shows this error: Uncaught TypeE ...

Tips for implementing lazy loading for a section of a template in Angular 2

I have an Angular 2 component that has several sub-components within it. Some of these sub-components are expensive to load and may not always be necessary, especially if the user doesn't scroll far enough down the page. Although I am familiar with l ...

The SKPhysicsBody created with SpriteKit's bodyWithTexture method is facing the wrong direction

Hey there, I'm currently troubleshooting an issue involving spritekit's physics shape appearing upside down. [SKPhysicsBody bodyWithTexture:monsterTexture size:monsterTexture.size] The problem arises when the monster reappears for the second ti ...

Arrange the table by adding and editing before and after appending

I have a table data that needs to be dynamically appended. But I want to allow users to add new data using text input and also edit the existing data before and after it's appended. The problem is that when I append new data, it overwrites the previo ...

Leveraging ng-hide in Angular to show or hide elements based on the state

Is there a way to utilize the ng-hide directive based on the value selected in a dropdown menu? Specifically, I am looking to display #additional-option if option C is chosen from the dropdown list. <div class="form-group"> <label class="co ...

The userscript is designed to function exclusively on pages originating from the backend, rather than on the frontend in a single-page application

I have a userscript that I use with Greasemonkey/Tampermonkey. It's set to run on facebook.com, where some pages are served from the backend during bootstrapping and others are loaded on the fly in the front-end using HRO, similar to how a Single Pag ...

Looking for a character that includes both lowercase and uppercase letters

Here is the JSON data I have: [ {"lastName":"Noyce","gender":"Male","patientID":19389,"firstName":"Scott","age":"53Y,"}, {"lastName":"noyce724","gender":"Male","patientID":24607,"firstName":"rita","age":"0Y,"} ] var searchBarInput = TextInput.value; var ...

Adding additional elements to a div in a horizontal orientation

I am currently working on a project where I need to display bars and restaurants based on specific filter criteria. I have a container div called .resultsContainer where all the results will be displayed. While I can easily append more divs (.barContainer) ...

Navigating through Dynamic URL Parameters with RouterLink in an Angular Application

Within my Angular 2 application, there exists a tab section where users can choose from a collection of separate yet contextually connected components. By clicking on one of these links, the corresponding component is loaded based on the routerLink definit ...

Webstorm showcases files with similar content in a distinct manner

In Webstorm, everything is color-coded based on whether it is a function, object, etc. I am working with JavaScript. I have noticed that in two different files, the same line of code looks differently: var Comment = React.createClass({ In file 1: "var" ...

I need assistance on updating a document in MongoDB using Node.js

I'm in the process of developing a feature that automatically updates a player's high score to their account when they achieve a new record. However, I'm struggling with how to search for a player by name and update their tag using mongoose. ...

Streamline a javascript code with numerous elements

Seeking assistance in simplifying this code Currently, I find myself constantly updating this code each time a new entry is uploaded. I am looking for a solution where there is a single script that can identify the element IDs ("#rolly" or "#lagrimas") a ...

How come the callback in Jquery fadeOut keeps looping repeatedly, and what can I do to stop this from happening?

My approach involves fading out a div box and implementing a callback function as shown below: function closeWindow(windowIdPrefix, speed) { $("#" + windowIdPrefix + "_ViewPanel").fadeOut(speed, function() { resetWindow(windowIdPre ...

Bootstrap not recognizing jQuery despite jQuery being present

I'm currently working on an HTML project that involves using jQuery, Bootstrap, and jQuery easing. However, I've encountered some errors while testing the code: bootstrap.min.js:6 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. ...

Identifying a specific field in a dynamically generated React.js component: Best practices

Currently, I am in the process of developing a form with an undetermined number of sensor fields. The front end has been successfully implemented and now my focus is on extracting user information from these dynamically generated component fields. Here is ...