Ember Template if helper not destroying component

Questions General
1

We have a view that renders different components in a BsTab depending on a configured mode.

{{#if this.isModeA}}
<BsTab @fade={{false}} as |tab|>
    <tab.pane @title="Mode A">
      <CustomComponentA @active={{this.currentObj}} />
    </tab.pane>
</BsTab>
{{else}}
<BsTab @fade={{false}} as |tab|>
    <tab.pane @title="Mode B">
      <CustomComponentB @active={{this.currentObj}} />
    </tab.pane>
</BsTab>
{{/if}}

After switching modes I’m not seeing the willDestroy callback being called on the components which is causing issues because there are getters firing in the non-destroyed component that aren’t designed to work when the mode doesn’t match.

I see that the unselected mode is no longer present in the DOM, but the underlying JS logic is still causing issues. Is there something missing from my understanding here? Is there any inherent issues with this design?

2

There is something wrong in your codebase. The template as pasted works as expected calling willDestroy as expected. Here is the twiddle I used to verify my claim.