skydoves/Balloon

ArrowOrientation.BOTTOM and END not working in M3 ModalBottomSheet

Closed this issue · 3 comments

  • Library Version [v1.6.4]
  • Affected Device(s)
    Samsung Galaxy zflip4 with Android 14 and Pixel5(emulator)

Describe the Bug:
When I use Ballon in M3 Modal BottomSheet
ArrowOrientation.BOTTOM is applied as ArrowOrientation.TOP
also, ArrowOrientation.END is applied as ArrowOrientation.START

Add a clear description about the problem.

        // setup Ballon
        val builder = rememberBalloonBuilder {
            setArrowSize(10)
            setArrowPosition(0.1f)
            setArrowOrientation(ArrowOrientation.BOTTOM) // <- ArrowOrientation Setup
            setWidth(BalloonSizeSpec.WRAP)
            setHeight(BalloonSizeSpec.WRAP)
            setPadding(9)
            setCornerRadius(8f)
            setBackgroundColor(Color(0xFFF5687E))
            setBalloonAnimation(BalloonAnimation.FADE)
            setDismissWhenClicked(true)
            setDismissWhenTouchOutside(false)
            setFocusable(false)
        }
        // ...other codes
                        Balloon(
                            builder = builder,
                            balloonContent = {
                                Text(
                                    modifier = Modifier
                                        .wrapContentWidth()
                                        .noRippleClickable {
                                            onFestivalUiAction(FestivalUiAction.OnTooltipClick)
                                        },
                                    text = stringResource(id = R.string.festival_search_onboarding_title),
                                    textAlign = TextAlign.Center,
                                    color = Color.White,
                                    style = Content5,
                                )
                            },
                        ) { balloonWindow ->
                            LaunchedEffect(key1 = Unit) {
                                scope.launch {
                                    delay(500L)
                                    balloonWindow.awaitAlignEnd()
                                }
                            }
                        }

result)
ArrowOrientation.BOTTOM is applied liked this(like ArrowOrientation.TOP)
image

ArrowOrientation.END is applied liked this(like ArrowOrientation.START)
image

ArrowOrientation.TOP and START is works normally as I intended.

Other Composable liked Screen in M3 Scaffold works normally as I inteded

full code is here.
https://github.com/Project-Unifest/unifest-android/blob/develop/core/ui/src/main/kotlin/com/unifest/android/core/ui/component/FestivalBottomSheet.kt

Expected Behavior:
ArrowOrientation.BOTTOM and END should be expressed as Orientation is set.

Hey @easyhooon, sorry for the late response. Have you fixed this issue using your own solution?

I will close this issue for now. If you still have any troubles from this issue, please reopen this!

@skydoves Currently, I have disabled the use of balloon in this bottom sheet. Since the issues mentioned above do not occur within the other Screen, i'm only using it in the TopAppBar within the screen. If I use it again in the future(in bottomSheet), I will check to see if the problem still persists :).