composablehorizons / compose-unstyled

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

ModalBottomSheet: Incorrect scrolling behavior when partially expanded #14

Closed rst10h closed 1 month ago

rst10h commented 1 month ago

Description: When the ModalBottomSheet is partially expanded, scrolling the list upwards causes the sheet to move along with the list. The expected behavior is that the list should scroll normally within the partially expanded sheet, and the sheet should only be draggable by the header or other static elements, or when the end or beginning of the list is reached (depending on the direction of movement).

Steps to Reproduce:

  1. Initialize a ModalBottomSheet with the following state:

    val partiallyExpanded = remember {
        SheetDetent(identifier = "part") { containerHeight, sheetHeight ->
            containerHeight * 0.5f
        }
    }
    
    val sheetState = rememberModalBottomSheetState(
        initialDetent = Hidden,
        detents = list of(Hidden, partiallyExpanded, FullyExpanded),
    )
  2. Set up the initial content and the ModalBottomSheet as follows:

    Box(modifier = Modifier.fillMaxSize().background(Color.White), contentAlignment = Alignment.Center) {
        Text("Show ModalSheet", modifier = Modifier.padding(20.dp).clickable { sheetState.currentDetent = partiallyExpanded })
    }
    
    ModalBottomSheet(state = sheetState) {
        Sheet(modifier = Modifier.statusBarsPadding().displayCutoutPadding().padding(top = 20.dp)) {
            Column(modifier = Modifier.fillMaxSize().background(Color.DarkGray)) {
                Box(modifier = Modifier.fillMaxWidth()) {
                    Text("some header", modifier = Modifier.align(Alignment.Center).padding(vertical = 20.dp), color = Color.White)
                }
                LazyColumn(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    items(100) { index ->
                        Text(text = index.toString(), modifier = Modifier.padding(8.dp), color = Color.White)
                    }
                }
            }
        }
    }
  3. Expand the ModalBottomSheet to the partially expanded state.
  4. Scroll the list upwards.

Expected Behavior:

Actual Behavior:

https://github.com/user-attachments/assets/b18de698-2b47-4ae3-8d5d-a697941b63b8

alexstyl commented 1 month ago

Fixed in 1.11.1 https://github.com/composablehorizons/composables-core/releases/tag/1.11.1