maxLines parameter

[mariaiffonseca]

Hello,

How can I control the maxLines parameter, present in the TexField?

Thank you in advance.

[dokar3]

Hi there. Currently, it's not possible to control the max lines since it uses accompanist's flow layout to lay out chips (TextFields). A rough workaround is combining Modifier.heightIn() and Modifier.verticalScrollable() with the BasicChipTextField():

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ScrollableOutlinedChipTextField(modifier: Modifier = Modifier) {
    val scope = rememberCoroutineScope()

    val interactionSource = remember { MutableInteractionSource() }

    val scrollableState = rememberScrollState()

    val state = rememberChipTextFieldState<Chip>()

    var value by remember { mutableStateOf("") }

    TextFieldDefaults.OutlinedTextFieldDecorationBox(
        // Make the decoration label work properly
        value = if (state.chips.isEmpty() && value.isEmpty()) "" else " ",
        innerTextField = {
            BasicChipTextField(
                state = state,
                value = value,
                onValueChange = { value = it },
                onSubmit = {
                    scope.launch {
                        awaitFrame()
                        // Scroll to the end after adding a new chip
                        scrollableState.animateScrollTo(scrollableState.maxValue)
                    }
                    Chip(it)
                },
                modifier = modifier
                    .fillMaxWidth()
                    .heightIn(max = 100.dp)
                    .verticalScroll(state = scrollableState),
                // Use the same interaction source as the decoration box
                interactionSource = interactionSource,
            )
        },
        enabled = true,
        singleLine = false,
        visualTransformation = VisualTransformation.None,
        // Use the same interaction source as the text field
        interactionSource = interactionSource,
        label = { Text("My text field label") },
    )
}

I know it looks a little silly but will work because this is how ChipTextField() and OutlinedChipTextField() draw their decoration. OutlinedChipTextField.kt

Implementing maxLines doesn't seem easy unless I make a copy of flowlayout and modify it. I'll try to make scrollable chip text fields easier to implement in subsequent versions.

[mariaiffonseca]

Yes, it works! Thank you for your time! 🙌

[dokar3]

Hi, 0.4.2 was published with the new innerModifier parameter to simplify this workaround. Feel free to check this PR for details: https://github.com/dokar3/ChipTextField/pull/52