composablehorizons / compose-unstyled

Unstyled, fully accessible Compose Multiplatform UI components that you can customize to your heart's content.
https://composeunstyled.com
MIT License
375 stars 13 forks source link

Non-Full-Height Bottomsheet cuts off scrollable content #4

Closed aschulz90 closed 3 months ago

aschulz90 commented 3 months ago

If the most fully expanded sheet state isn't covering the whole container height, then the content is cut off at the bottom.

Repro code:

val peek = SheetDetent("peek") { containerHeight, sheetHeight -> 160.dp }
val almostFullyExpanded =
    SheetDetent("almost-fully-expanded") { containerHeight, sheetHeight ->
      containerHeight * 0.85f
    }

val sheetState =
    rememberBottomSheetState(
        initialDetent = peek,
        detents = listOf(peek, almostFullyExpanded),
    )

BottomSheet(
    state = sheetState,
    modifier = Modifier.fillMaxWidth().background(Color.White).navigationBarsPadding(),
) {
  Column(
      modifier =
          Modifier.fillMaxWidth(),
      horizontalAlignment = Alignment.CenterHorizontally,
  ) {
    DragIndication(
        Modifier.background(
                color = Color.Black.copy(0.4f),
                shape = RoundedCornerShape(100),
            )
            .width(32.dp)
            .height(4.dp)
            .padding(8.dp),
    )
    LazyColumn(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
      repeat(50) { item { BasicText("Item #${(it + 1)}", modifier = Modifier.padding(10.dp)) } }
    }
  }
}

You can see, that the extra height, that isn't covered by the sheet, is pushed below the screen. I can't scroll anymore, but there are still 2 elements in the list not visible on screen (disregarding the navbar). grafik

As a workaround I can limit the height myself with heightIn(max = *), that is equal to the missing height at the top, but I will have to calculate that value myself, even though the bottomsheet should already know that value through the biggest detent(?). Or as padding at the bottom, but that would leave an ugly empty area, if the content isn't high enough to be scrollable.

alexstyl commented 3 months ago

Thanks for letting me know and for the detailed report. I was able to reproduce it. Looking into it

alexstyl commented 3 months ago

Fixed in https://github.com/composablehorizons/composables-core/commit/bfc26babe5bb190cd24422d596a1b5fc89f742f2.

Will be released as part of 1.9.0. Will post here when the new version is available.

alexstyl commented 3 months ago

Shipped in version 1.9.0