compose-multiplatform icon indicating copy to clipboard operation
compose-multiplatform copied to clipboard

Enter/Return doesn't work as expected in a single line TextField

Open luludevmuniz opened this issue 1 year ago • 1 comments

Describe the bug After setting the TextField parameter singleLine to true or maxLines to 1 and writing some text in it, pressing Enter/Return causes the cursor to return to the start of the TextField and the user can write some invisible text behind the text.

Affected platforms

  • Web (K/Wasm) - Canvas based API

Versions

  • Kotlin version*: 1.9.21
  • Compose Multiplatform version*: 1.6.0-beta02

To Reproduce Steps and/or the code snippet to reproduce the behavior:

  1. Go to kmp.jetbrains.com
  2. Selected Wasm option
  3. Download the project
  4. Replace the App() function for the codesnippet below
  5. Run the app in your browser
  6. Write some text in the TextField
  7. Press Enter/Return
  8. Text something and then you'll notice it will take a few deletes to reach the original text again.

Code Snippet:

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.OutlinedTextField
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun App() {
    MaterialTheme {
        var value by remember { mutableStateOf("") }
            OutlinedTextField(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 16.dp),
                value = value,
                onValueChange = {
                    value = it
                },
                singleLine = true
            )
        }
}

Expected behavior Don't allow the cursor to go back to the start of the composable.

Additional Context For some reason, the cursor is vanishing when I write the first text, so it's harder to see.

luludevmuniz avatar Feb 07 '24 13:02 luludevmuniz

More info:

pressing Enter causes the cursor to go on the next line (TextField just doesn't show it)

adding a println shows in the logs that the actual text value has more lines

onValueChange = {
                value = it
                println("Value = $it")
            },

On desktop, the cursor never gets removed from the first (single) line.

eymar avatar Feb 07 '24 16:02 eymar

Could not reproduce it on 1.6.10-beta02.

luludevmuniz avatar Apr 25 '24 17:04 luludevmuniz

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.

okushnikov avatar Jul 14 '24 15:07 okushnikov