OutlinedTextField shows up only once

Question

Here's my code for a form text field composable:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FormTextFieldComponent(
    topText: String,
    initialText: String=""
) = Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
) {
    // Small Text at the top (dynamic content)

    var textState by remember { mutableStateOf(TextFieldValue(initialText)) }

    OutlinedTextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        label = { Text(topText) }
    )
}

However, it shows up only once with this code (only shows the first textfield):

FormTextFieldComponent("First Name", "Van")
Spacer(modifier = Modifier.height(1.dp))
FormTextFieldComponent("Last Name", "Chen")
Spacer(modifier = Modifier.height(1.dp))

What is wrong?

Answer 1

The quick answer is: You are using fillMaxSize(), so when the first TextField is render, it fills all the screen, then the second one is rendering outside the screen. So you should use fillMaxWidth() instead of fillMaxSize()

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) 

You can prove this using this code, wrapping one of the TextFields and scaling the 0.5 of the full size

@Composable
fun Greeting(modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()

    Column(
        modifier = modifier.fillMaxSize()
    ) {
        Box(modifier = Modifier.fillMaxSize(0.5f)){
            FormTextFieldComponent(topText = "First Name", initialText = "Van")
        }
        Spacer(modifier = Modifier.height(10.dp))
        FormTextFieldComponent(topText = "Last Name", initialText = "Chen")
        Spacer(modifier = Modifier.height(1.dp))
    }
}

Also as recommendation to have more control in the sizes, try to always put a modifier parameter to composable functions like this:

@Composable
fun FormTextFieldComponent(
    modifier: Modifier = Modifier,
    topText: String,
    initialText: String=""
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp)
    ){ }
}

Is a good practice in order to modify this from the parent.

Answer 2

Remove fillMaxSize() modifier.

Answer 3

There is two problem as I see: 1- if you only see one text field and no more views on the screen it is because your function matches the size of your whole view. change it to wrapcontentsize() 2- if you see some other view as well but your data is repetitive it is because you have not created a 'Key' for your text state.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FormTextFieldComponent(
    key: String,
    topText: String,
    initialText: String=""
) = Column(
    modifier = Modifier
        .wrapContentSize()
        .padding(16.dp)
) {
    var textState by remember(key) { mutableStateOf(TextFieldValue(initialText)) }

    OutlinedTextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        label = { Text(topText) }
    )
}