Search code examples
javascriptnode.jsangularjsmaterial-designevent-propagation

Angularjs Angular-Material Back Button Executes Twice

I just incorporated angular-material v1.1.20 into my angularjs v1.3.13 project and now, only when running on a mobile device and pressing the back button, the back operation is executed twice. When investigating the call stack during debug I notice that the angular back button eventHandler is called twice in a row as shown in the screenshot below. Any idea how to stop this from happening?

enter image description here

Solution

  • Seems like I was able to fix this event propagation issue by simply modifying angular-material.js (v1.1.20) and adding the following:

    4095 eventObj.srcEvent = srcEvent;
     + eventObj.immediatePropagationStopped = true;
4096
4097 angular.extend(eventObj, {
...
4166 eventObj.srcEvent = srcEvent;
     + eventObj.immediatePropagationStopped = true;
4167 eventPointer.target.dispatchEvent(eventObj);

    Or by running the following find and replace regular expression:

    Find - eventObj\.\$material = true;\n eventObj\.pointer = eventPointer;\n eventObj\.srcEvent = srcEvent;

    Replace - $0\n eventObj.immediatePropagationStopped = true;

    angular-material.min.js can also be modified by running the following find and replace regular expression:

    Find - \$material=!0,o\.pointer=n,o\.srcEvent=e,

    Replace - $0o.immediatePropagationStopped=!0,