willBeActive

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('products', function() {
    this.route('details', { path: '/:productId' });
  });
});

export default Router;

routes.products.details.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    // Works
    return params;

    // Works
    return new Ember.RSVP.Promise(resolve => {
      resolve(params);
    });

    // Fails
    return new Promise(resolve => {
      resolve(params);
    });

    // Fails
    return new Ember.RSVP.Promise(resolve => {
      setTimeout(() => {
        resolve(params);
      }, 1000);
    });
  }
});

styles.app.css

a { color: blue; }
.active { color: green; }
.ember-transitioning-in { color: red; }

templates.application.hbs

<h1>Routing fails to identify willBeActive in some scenarios.</h1>

<h2>Reproduction</h2>

<ol>
  <li>Review `styles/app.css`. It's setting a `red` color to anything marked as `ember-transitioning-in`.</li>
  <li>Click each of the four links and notice that no link is red.</li>
  <li>Open `routes/products/details.js` and comment out each of the return statements in succession.</li>
  <li>After commenting out each return statement click around and note the success or failure as specified by the comment above the line.</li>
</ol>

<h2>Analysis</h2>
<p>This probably has something to do with the combination of the "slow transitions" which trigger a loading route given that a promise we <strong><em>can</em> track doesn't trigger</strong> the failure, but a native promise which we <strong><em>can't</em> track does trigger</strong> the failure.</p>

<p>The code for <a href="https://github.com/tildeio/router.js/blame/17a4cd3b6ac8053f3eb20d4358e2bc37653774b6/lib/router/transition-intent/named-transition-intent.js#L108-L124">checkingIfActive</a> hasn't been meaningfully touched in four years. A quick check on Ember Twiddle shows that we've been broken since at least 2.0.</p>

<hr />

<ul>
	<li>{{#link-to "products.details" "1"}}1{{/link-to}}</li>
	<li>{{#link-to "products.details" "2"}}2{{/link-to}}</li>
	<li>{{#link-to "products.details" "3"}}3{{/link-to}}</li>
	<li>{{#link-to "products.details" "4"}}4{{/link-to}}</li>
</ul>

<hr />

{{outlet}}

templates.products.details.hbs

Details: {{model.productId}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2"
  }
}