Compose 'Placeholder" text

This is going to be hard to explain in text but I will try. I have the following text field:

 OutlinedTextField(
            modifier = modifier ...
            label = { Text("Amount") },
            value = value.toString() , // as an Int parameter
            onValueChange = updateAmount, // callback

            placeholder = {
                Text( "0") <-- problematic line
            }
        )

What happens is that as the user first clicks on the text field and starts typing, the placeholder text disappears and is replaced by the input text as expected.
However, if you press backspace until the typed text is all gone, it is replaced with zero again, but this time, the cursor is before the placeholder text, so it becomes part of the typed text.

Example for clarification:

 --------
| 0|     |   <- placeholder text and cursor
 --------

 --------
| 1|    |   <- input text
 --------
 --------
| 12|    | 
 --------
 --------
| 123|    | 
 --------
Now deleting:
 --------
| 12|    |   
 --------
 --------
| 1|    |   
 --------
 --------
| |0    |   
 --------

Now typing again:
 --------
| 1|0    |   
 --------
 --------
| 12|0    |   
 --------

Effectively the placeholder text is becoming part of the input.

Is this a bug or a feature ? And how to work around this ?
Thanks in advance.

>Solution :

The placeholder doesn’t, can’t become part of the value. Those Composables aren’t even connected. I think you may have logic somewhere else that replaces an empty value with 0, perhaps when parsing the text input to an Int.

Leave a Reply