ionic-framework: bug: ion-back-button does not display if wrapped in custom component

Bug Report Ionic version: [x] 4.0.0.rc-1

Current behavior: I do see in the element list that the second page in the stack gets an can-go-back class. However the ion-back-button remains invisible (display:none)

Expected behavior: ion-back-button should be visible. As there is a previous page in the stack.

Steps to reproduce: I have a page with a sidepanel menu. Which is a tab page. I navigate to the child page with navigateForward(), I can go back either by swiping back or pressing the tab icon.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.2.1
   @angular/cli                  : 7.2.1
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 24 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v11.6.0 (/usr/local/Cellar/node/11.6.0/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10O45e

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 1
Comments: 18 (6 by maintainers)

Most upvoted comments

I ran into this issue following the tutorial on ionic’s youtube channel: “Ionic Framework Crash Course (4.0+)”.

Putting ion-back-button { display: block; } into detail.page.scss solved it. The video should be updated to include a note to this affect for people who come across it in the future.

Edit: also adding defaultHref='/home' to the ion-back-button attributes will also fix this. Edit2: also https://ionicframework.com/docs/api/buttons needs to be updated about this aswell.

bobajeff on Nov 24, 2019

We can’t reproduce this issue, can you provide a repo case that reproduces the issue? If .can-go-back is there, what is preventing the ion-back-button to be visible?

Can you also share the markup of the page that is not getting the visible ion-back-button?

After further investigating I found out that it happens if you wrap the ion-header in another component. So that component actually contains the ion-header

So this won’t work

<header-component></header-component>
<ion-content><ion-content>

But if you take out the ion-header

<ion-header>
  <header-component></header-component>
</ion-header>
<ion-content></ion-content>

What I did found out is if you got back by swiping back you would get back to the root tab with a visible back button in the header.

Silvest89 on Jan 10, 2019

I can confirm that adding a dedicated CSS rule like

tabbed-navigator.can-go-back ion-back-button { display: block; }

solves the problem. Many related issues, such as what “back” means, are usually related to router configuration.

ibanjo on Apr 1, 2019