Cannot set property 'pur' of undefined

[Thrilleratplay]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (see above))

Current behavior:
After upgrading to v1.6.5, a panel whose visibility delayed using $timeout is throwing an error angular.js:14642 TypeError: Cannot set property 'pur' of undefined

Expected / new behavior:
Timeout cancelation should fail gracefully

Minimal reproduction of the problem with instructions:
Unfortunately I have not been able to create a Plunker that recreates this issue. In the environment I am working in, I am able to regularly reproduce this error by moving the mouse in and out of the element that triggers the showPanel/hidePanel functions three or four times.

Below I have attached a stacktrace and relative code. Please let me know if this is insufficient and I will continue to try to recreate the issue in Plunker.

Angular version: 1.6.5 but not version 1.6.4

Browser: Chrome 60 (only browser tested)

Anything else:

I am assuming that it is related to this commit: fix($timeout/$interval): do not trigger a digest on cancel and the simplest fix would be to add a check here:

function markQStateExceptionHandled(state) {
  if (state) {
    state.pur = true;
  }
}

** Debugging information**

Stacktrace:

angular.js:14642 TypeError: Cannot set property 'pur' of undefined
    at markQStateExceptionHandled (angular.js:17320)
    at markQExceptionHandled (angular.js:17323)
    at Function.timeout.cancel (angular.js:20422)
    at e.i.hidePanel (scope.component.js:188)
    at fn (eval at compile (angular.js:15500), <anonymous>:4:186)
    at callback (angular.js:27285)
    at Scope.$eval (angular.js:18372)
    at Scope.$apply (angular.js:18472)
    at HTMLDivElement.<anonymous> (angular.js:27290)
    at specialMouseHandlerWrapper (angular.js:3782)
    at HTMLDivElement.eventHandler (angular.js:3759)
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
$apply @ angular.js:18477
(anonymous) @ angular.js:27290
specialMouseHandlerWrapper @ angular.js:3782
eventHandler @ angular.js:3759

Relative element with mouse event triggers

<div class="flex flex-auto relative"
     ng-mouseenter="scopeCtrl.showPanel()"
     ng-mouseleave="scopeCtrl.hidePanel()"
     ng-class="(scopeCtrl.collapsed ? 'closed' : 'open'">
  <!-- Additional content here-->
</div>

Relative JavaScript functions

var vm = this;
var panelTimer;

/**
 * Delayed show Scope panel
 */
vm.showPanel = function() {
  $timeout.cancel(panelTimer);
  panelTimer = $timeout(function() {
    vm.collapsed = false;
  }, 300);
};

/**
 * Delayed delayed Scope panel
 */
vm.hidePanel = function() {
  $timeout.cancel(panelTimer);
  panelTimer = $timeout(function() {
    vm.collapsed = true;
  }, 300);
};

[gkalpak]

This is very strange. All promises have a $$state property from the get go. I can't imagine how it is would be possible to end up at that point of the code with $$state being undefined 😕

A repro woud definitely help.

(Other than the missing repro, awesome bug report  ❤️ )

[Thrilleratplay]

My apologies, this is an issue of my own creation and explains why I couldn't reproduce the issue on Plunker. I was using Bluebird.js with angular-bluebird-promises to override the built in Angular promise service for the cancelable promise feature. I guess these have both diverged enough from Kris Kowal's Q.

[gkalpak]

Hm....so I guess we have made it impossible (or possibly just harder than necessary) for people to swap $q with a different implementation 😕
If it is easy to fix and someone wants to take a look at what it would take to make it more straightforward, please go ahead.

[rickyk586]

Instead of using $mdToast.showSimple('Toast Message'), use:

$mdToast.show({
	template: '<md-toast><div class="md-toast-content">Toast Message</div></md-toast>',
	hideDelay: false
});
$timeout(() => $mdToast.hide(), 2900);

[petebacondarwin]

I'm going to land this with comments explaining why those if statements are there.