IssueTracker

Context: Creating a list/detail UI where the detail pane has a NavHost. Tapping an item in the list pane causes navigation within that NavHost, so the NavController must be created outside the ListDetailPaneScaffold. A high-level sketch of this design would look something like this:

@Composable
fun ListDetailUi() {
  val listDetailNavigator = rememberListDetailPaneScaffoldNavigator()
  val detailNavController = rememberNavController()

  val onItemClickShowDetailPane = remember {
    { itemId: String ->
      detailNavController.navigateTo("item_detail/${itemId}") {
        popUpTo("detail_nav_root")
      }
      listDetailNavigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
    }
  }

  ListDetailPaneScaffold(
    value = listDetailNavigator.scaffoldValue,
    directive = listDetailNavigator.scaffoldDirective,
    listPane = {
      AnimatedPane {
        ListPane(
          onItemSelected = onItemClickShowDetailPane,
        )
      }
    },
    detailPane = {
      AnimatedPane {
        NavHost(
          navController = detailNavController,
          startDestination = "placeholder",
          route = "detail_nav_root",
        ) {
          composable("item_detail/{itemId}") {
            ItemDetail()
          }
          composable("placeholder") { ... }
        }
      }
    }
  )
}

However, when the detail pane is hidden, AnimatedPane will skip its content. On a configuration with only the list pane visible, tapping an item crashes because it tries to navigate on a NavController that isn't attached to a NavHost and thus has no graph.

FATAL EXCEPTION: main
java.lang.IllegalArgumentException: Cannot navigate to NavDeepLinkRequest{ REDACTED }. Navigation graph has not been set for NavController androidx.navigation.NavHostController@d3c6108.