Skip to content

Incorrect Balloon Position within BottomSheet and LazyColumn, especially during Scrolling #792

@msseodev

Description

@msseodev
  • Library Version: 1.6.12
  • Affected Device(s): Tested on Samsung SM-F741N(zFlip)

Describe the Bug:
The position of the balloon tooltip is not accurately maintained, particularly during scrolling. As demonstrated in the attached video, the balloon's position deviates from its intended anchor point, becoming inaccurate especially when scrolling within a LazyColumn that is nested inside a BottomSheet. This positional inaccuracy is more pronounced during scrolling and when the BottomSheet is not fully expanded or is in the process of being dismissed/collapsed.

issue-bollon-position.mp4

Minimal repoduce

    var balloonWindow: BalloonWindow? by remember { mutableStateOf(null) }
    BottomSheetScaffold(
        sheetContent = {
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = Color.Cyan)
            ) {
                items(50) { index ->
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(100.dp)
                            .background(if (index % 2 == 0) Color.Blue else Color.Yellow)
                    ) {
                        if(index == 1) {
                            Balloon(
                                builder = rememberBalloonBuilder {
                                    setArrowSize(10)
                                    setArrowPosition(0.5f)
                                    setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
                                    setWidth(BalloonSizeSpec.WRAP)
                                    setHeight(BalloonSizeSpec.WRAP)
                                    setPadding(12)
                                    setCornerRadius(12f)
                                    setBackgroundColor(android.graphics.Color.MAGENTA)
                                    setDismissWhenTouchOutside(false)
                                },
                                onBalloonWindowInitialized = { balloonWindow = it },
                                onComposedAnchor = { balloonWindow?.showAlignTop() },
                                balloonContent = {
                                    Text(
                                        text = "I am balloon tooltip!"
                                    )
                                },
                                content = {
                                    Text("Item $index")
                                }
                            )
                        } else {
                            Text("Item $index")
                        }
                    }
                }
            }
        }
    ) { padding ->
        Box(modifier = Modifier.padding(padding))
    }

Expected Behavior:
The balloon tooltip should remain consistently anchored to its designated anchor point at all times, including during scrolling and regardless of the BottomSheet's visibility or expansion state. It should not lose its correct position relative to the anchor element when the content within the LazyColumn is scrolled or when the BottomSheet is being interacted with.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions