RichToolTips positioned incorrectly after browser window resized

[gsteckman]

Describe the bug When using RichToolTips with a PositionProvider from TooltipDefaults.rememberRichTooltipPositionProvider(), the position of the tooltip might be incorrect after resizing the browser window.

Affected platforms

• Web (K/JS) - Canvas based API (tested with Firefox and Chrome on Windows 10)

Versions

• Kotlin version*: 1.9.22
• Compose Multiplatform version*: 1.6.0
• OS version(s)* (required for Desktop and iOS issues): Windows 10
• OS architecture (x86 or arm64): x86
• Device (model or simulator for iOS issues):
• JDK (for desktop issues):

To Reproduce Steps and/or the code snippet to reproduce the behavior:

@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
fun main() {
    onWasmReady {
        CanvasBasedWindow("title") {
            Row(
                modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                TooltipBox(
                    positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
                    tooltip = {
                        RichTooltip(text = { Text("House Tooltip") })
                    },
                    state = rememberTooltipState(isPersistent = true)
                ) {
                    Icon(Icons.Default.Home, contentDescription = "")
                }
                TooltipBox(
                    positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
                    tooltip = {
                        RichTooltip(text = { Text("ThumbUp Tooltip") })
                    },
                    state = rememberTooltipState(isPersistent = true)
                ) {
                    Icon(Icons.Default.ThumbUp, contentDescription = "")
                }
                TooltipBox(
                    positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
                    tooltip = {
                        RichTooltip(text = { Text("Face Tooltip") })
                    },
                    state = rememberTooltipState(isPersistent = true)
                ) {
                    Icon(Icons.Default.Face, contentDescription = "")
                }
            }
        }
    }
}

Expected behavior The tooltip position should be correct after resizing the browser window.

Screenshots The screenshot below shows the incorrectly positioned tooltip that should be anchored to the right icon (the face), after the browser window was resized. Before resizing the window, the tooltip displays in the expected position.

In the second screenshot below, you can see that the ThumbUp tooltip is displaying to the left of the anchor even though there is sufficient space for it to be displayed below and to the right, which is the expected position when there is enough screen space to the right of the anchor (if the window is subsequently resized to be much wider the tooltip will again be positioned to the right of its anchor).

Additional context Add any other context about the problem here.

[gsteckman]

This appears to be fixed in 1.6.10-beta02.

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.