Ionic-framework: bug: hide-back-button hides ion-nav-buttons

[premiumFrye]

Type: bug

Platform: all

First, a pen: http://codepen.io/nsquimby/pen/ZGQOvY?editors=101

This is probably a lot for this issue, but I just wanted to cover my bases because it doesn't look like there are any 'good' workarounds using the ionic platform at the moment.

My use case is after a user goes through a series of views (setup wizard), the final view provides a link back to my apps home/default state. That default view has hide-back-button="true", and I would expect it would display the ion-nav-buttons including my button with menu-toggle="left", however all nav-buttons are hidden (see Test 2 in pen)

The expected behavior ofenable-menu-with-back-views="false" on the ion-side-menu is to display only the back button OR the left nav buttons (see Test 1 in pen), in which case it's acting as it should. However, I cannot find a reasonable work-around to hide the back buttons in a view and display other ion-nav-buttons which doesn't involve outright removing ion-nav-back-button from menu.html (or whatever template with ion-side-menu) and then putting and adding it to every state where I may want a back button. I would expect adding hide-back-button="true"[edit] would hide just the back button, but it also appears to hide the ion-nav-buttons on the left, as in Test 2 in the pen

Workarounds I've tried include calling $ionicHistory.$clearHistory() (see Test 3 in pen) each time the user clicks a link back to the /app/home state, and I expect /app/home would be treated as the root state in history, and therefore, not show the back button, but the back button still hides the other ion-nav-buttons (because menu with back buttons are disabled) and because the view history has been cleared, the back button does nothing.

Some users may want to allow a back button from parent state to a child state (Test 4 in pen, which originally brought this bug to my attention), so changing the default behavior may be problematic. A few solutions which would break fewer peoples apps would be: prevent hide-back-button from hiding all the ion-nav-buttons on the left side (in this case, my button with menu-toggle="left"), OR, provide a configuration option in $ioniNavBarDelegate to define the root state at which ion-back-button never appears.

[mhartington]

Wow, so thanks for the very detailed issue and codepen :smile:

So since there's a lot going on here, I'm going to take each part one at a time.

So in one of your tests, you call clear history, but what you could do instead is call next view options

http://codepen.io/mhartington/pen/mJwxxj

  .state('app.test2', {
    url: "/test2",
    views: {
      'menuContent' :{
        templateUrl: "views/test2.html",
        controller: function ($ionicHistory, $scope) {
          console.warn('Clearing history!');
          $ionicHistory.nextViewOptions({
            historyRoot: true
          });
        }
      }
    }
  })

Which is essentially what's being called by menu-close. So this way, when a user completes the wizard, they can go back to the first view, but the history root will start with that next view.

[premiumFrye]

Thanks, can confirm that works, but that's not a solution I had in mind because it requires declaring nextViewOptions on every link back to the home state requiring a lot more code :/. A workaround i've implemented is sticking this in the controller for the home state:

$scope.$on('$ionicView.beforeEnter', function (e,config) {
  config.enableBack = false;
});

It feels awfully hacky, but it works -- see here: http://codepen.io/nsquimby/pen/PqjxxV?editors=101

Conveniently, this also works when cache-view='false' because it doesn't depend on the controller getting fired again, as well as on nested states, because it doesn't alter history.

Ultimately I think that when enable-menu-with-back-views="false" on your side menu template, hide-back-button="true" on your 'home' state template should _not_ hide the menu/sandwich button along with the back button, and I don't think that's the behavior people expect.

[mhartington]

it requires declaring nextViewOptions on every link back to the home state requiring a lot more code

This is why we have directives! You could create a directive for this and just add it to the links as an attribute.

and I don't think that's the behavior people expect.
This is an example of ionic not being able to guess what people want. Sometimes it needs a hint, such as my suggestion to create directive and utilizing our nextViewOptions.

[premiumFrye]

I understand what you're saying, and I don't disagree (can't predict what everbody wants), but I think we're also a bit on a tangent: what's at the heart of my actual issue is that hide-back-button="true" also hides the menu icon, which I don't think either one of us have argued is desirable or expected behavior. Looking back at my verbose pen, Test 2 is the one I care about the most (the menu button is hidden which you click the link to return to a 'home' state. 3 & 4 are only there to show that I've tried some other options, and are probably a distraction at this point, and 1 just shows the behavior of when you don't add 'hide-back-button="true".

[mhartington]

hide-back-button="true" does not hide the menu toggle.

Whats happening here is that enable-menu-with-back-views="false" is set on the ion-side-menus. This will hide the menu toggle when you navigate to a non-root page.

http://ionicframework.com/docs/api/directive/ionSideMenus/#api

So there are a few options here.
1) don't use hide-back-button and use the nextViewOptions *ideal
2) set enable-menu-with-back-views="true".

Option 1 is ideal because you still get the same effect as hide-back-button, but have more control.
Again, hide-back-button isn't hiding the menu button, but it's hide-back-button and enable-menu-with-back-views doing both their correct jobs but in an unfortunate way.

[premiumFrye]

Yes, I was assuming enable-menu-with-back-views="false" as that was how my pen was configured, and described my original post. As you said, I think the combination of that and hide-back-buttons="true" sort of does what their supposed to do, but produces unexpected results in the way of hiding the menu button as well --that's the behavior I would like to see changed with this issue (hide just the back button, and not the menu button with enable-menu-with-back-views="false" and hide-back-buttons="true" ).

I just realized a small typo that 'hide-back-button="false" in the 2nd paragraph which I changed to "true". Additionally, I think that including multiple examples of workaround attampts obfuscated the change I was actually asking for.

[mhartington]

Then for that, do not use hide-back-button and use the nextViewOptions.

[cpamp]

I'm surprised that this is "working as intended." IMO, hide-back-button should do exactly as it says, hide the back button. Not the menu button as well.