dokar3 / ChipTextField

Editable chip layout for Compose Multiplatform
Apache License 2.0
97 stars 4 forks source link

Leading and Trailing icons in scrollable text field #171

Closed mariaiffonseca closed 4 weeks ago

mariaiffonseca commented 4 weeks ago

Hello

I'm using your library to achieve the following layout:

https://github.com/user-attachments/assets/d53ec66f-6f54-473d-9cfb-29acf27f85d4

However, I updated from chiptextfield:0.4.0-alpha to chiptextfield-m3:0.7.0-alpha05. As expected, I made a lot of changes and I noticed a little issue that I'm expecting that is possible to fix - comparing to the previous video, the trailing and leading icons does not move along the scroll like ChipTextField does

https://github.com/user-attachments/assets/16326a6f-ec89-46a2-bf44-b274e596b105

If it helps, this is what I am doing.

ChipTextField(
        state = textFieldState,
        value = value,
        onValueChange = { valueChanged(it) },
        onSubmit = {
            Chip(it.trim())
        },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .heightIn(max = 90.dp)
            .focusRequester(focusRequester)
            .focusable(interactionSource = interactionSource)
            .verticalScroll(state = scrollableState),
        readOnlyChips = true,
        textStyle = MaterialTheme.typography.bodyLarge.copy(
            color = MaterialTheme.colorScheme.MessageField,
            fontSize = dimensions.normalText
        ),
        chipTrailingIcon = { chip ->
            CloseButton(onClick = {

            })
        },
        colors = TextFieldDefaults.colors(
            unfocusedContainerColor = Color.Transparent,
            disabledContainerColor = Color.Transparent,
            focusedContainerColor = Color.Transparent,
            unfocusedLabelColor = Color.Transparent,
            cursorColor = Grey3,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledTextColor = PrimaryGrey,
            disabledLabelColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        leadingIcon = {
            Text(
                text = stringResource(id = R.string.new_message_to),
                modifier = Modifier.padding(start = dimensions.extraSmallPadding),
                style = MaterialTheme.typography.bodyLarge.copy(
                    color = DarkGrey,
                    fontSize = dimensions.normalText
                )
            )
        },
        trailingIcon = {
            IconButton(onClick = {

            }) {
                Icon(
                    painterResource(id = R.drawable.ic_contacts),
                    contentDescription = stringResource(id = R.string.contacts),
                    tint = OnPageGreen
                )
            }
        },
        enabled = true,
        interactionSource = interactionSource
    )

Let me know if you need more information, and thank you for your support!

mariaiffonseca commented 4 weeks ago

I noticed what was my problem… It is supposed to use innerModifier instead.