rotaryWithScroll in Dialogs about horologist

[yschimke]

You are defining it in the wrong scope. Or rather you need a focusRequester for each scrollable thing, and in the right scope. The active bit of the name, means that it follows the focus lifecycle of the Composable. But you have it at the screen level. It should be inside the Dialog.

@OptIn(ExperimentalHorologistApi::class,
    ExperimentalWearFoundationApi::class
)
@Composable
fun MainScreen(
    modifier: Modifier = Modifier,
) {
    val focusRequester = rememberActiveFocusRequester()
    val columnState = rememberColumnState()
    
    val showDialog = remember { mutableStateOf(false) }

    Scaffold(
        modifier = modifier,
    ) {
        ScalingLazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .rotaryWithScroll(columnState, focusRequester),
            state = columnState.state
        ) {
            // ...
        }

        Dialog(
            // modifier = Modifier.rotaryWithScroll(dialogScrollState, focusRequester),
            showDialog = showDialog.value,
            onDismissRequest = { showDialog.value = false },
            scrollState = dialogScrollState,
        ) {
            val dialogFocusRequester = rememberActiveFocusRequester()
            val dialogScrollState = rememberScalingLazyListState()
            Alert(
                modifier = Modifier.rotaryWithScroll(dialogScrollState, dialogFocusRequester),
                scrollState = dialogScrollState,
                icon = {},
                title = {},
                negativeButton = {},
                positiveButton = {},
            ) {
                // ...
            }
        }
    }
}

[Digipom]

@yschimke Thank you, I was able to fix it like this:

Dialog(showDialog = showDialog, onDismissRequest = onDialogDismissed) {
        val scrollState = rememberScalingLazyListState()
        Alert(
            modifier = Modifier
                .fillMaxSize()
                .rotaryWithScroll(
                    focusRequester = rememberActiveFocusRequester(),
                    scrollableState = scrollState
                ),
            scrollState = scrollState,
// ...

As a feature request, if we could have an "opinionated" version that does the same thing as Alert does currently (lets us provide our own buttons and our own composables for title and message, that it wraps itself using CompositionLocalProvider etc...) it would allow me to use AlertDialog instead of Dialog / Alert.

[yschimke]

cc @BowerSteve thoughts? The original issue is how to make Wear Compose dialogs work with RSB. The fix is Horologist combined APIs, or Dialog + Alert combos. There isn't a working slot based single API.

I'm not sure it's worth the limitations. You can combine these as you show.

The Horologist material dialogs take strings, in order to follow internal guidance on Material Dialogs, on different screen sizes. Even measuring text length.

horologist/compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt

Line 125 in c25f407

public fun AlertContent(

The other benefit is the middle part, Alert in your example or AlertContent for the Horologist ones are easily used in Preview or Screenshot tests.

[yschimke]

Horologist has some nicer APIs that do all this for you, AlertDialog and Confirmation.

            AlertDialog(
                showDialog = showDialog.value,
                icon = {},
                title = "Title",
                onCancel = { showDialog.value = false },
                onOk = { showDialog.value = false },
            ) {
                item {
                    Text(text = "Abc Abc Abc Abc\ndef def def\nghi ghi ghi")
                }
            }