[Material 3] Chip is being created twice

[mariaiffonseca]

Hello,

I’m using material 3 (io.github.dokar3:chiptextfield-m3:0.7.0-alpha05), and I noticed a little issue that needs your help to figure out what is happening.

Sometimes, when I press the enter key, the chip appears twice. I didn’t recognize a pattern that led me to this situation. I noticed that whenever this issue occurs, the onValueChange is triggered twice right after I click on the enter button: the first time, the return value is an empty string, and the second time, it returns the value I already submitted.

The recorded video has the following code source, which reproduces the error. Let me know if I am doing something wrong or if there is a quick fix for this issue


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ChipTextField(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun ChipTextField(modifier: Modifier = Modifier) {
    var value by remember { mutableStateOf("") }
    val textFieldTags = rememberChipTextFieldState<Chip>()
    val scrollableState = rememberScrollState()

    ChipTextField(
        modifier = modifier.fillMaxSize(),
        state = textFieldTags,
        value = value,
        onValueChange = {
            value = it
        },
        onSubmit = {
            value = ""
            Chip(it.trim())
        },
        innerModifier =
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .verticalScroll(state = scrollableState),
        readOnlyChips = true
    )
}

Thank you in advance!

Screen.Recording.2025-02-21.at.12.07.52.mov