I am using `BasicTextField` in my Jetpack Compose ...

# compose-android

[KotlinLeaner]

I am using BasicTextField in my Jetpack Compose application and have added a label to it.

[KotlinLeaner]

However, I am facing an issue with the label's behavior:
• When I click on the BasicTextField or it gains focus, the label height seems to behave strangely.
• The label doesn't move or adjust its position properly until I start typing something in the text field.
Is this the expected behavior of BasicTextField, or am I missing something in the implementation? How can I ensure the label transitions properly when the field gains focus, even if no text is entered?
Any guidance or suggestions would be appreciated.

[KotlinLeaner]

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicSecureTextField
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import com.example.baisctextfieldexample.ui.theme.BaiscTextFieldExampleTheme

class MainActivity : ComponentActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BaiscTextFieldExampleTheme {
                val stateOne = rememberTextFieldState()
                val stateOTwo = rememberTextFieldState()
                BasicTextFieldExamples(stateOne, stateOTwo)
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun BasicTextFieldExamples(stateOne: TextFieldState, stateOTwo: TextFieldState) {
        Column(
            Modifier
                .fillMaxSize()
                .padding(50.dp)
        ) {
            BasicTextField(
                state = stateOne,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp),
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Email,
                    imeAction = ImeAction.Next
                ),
                decorator = {
                    TextFieldDefaults.DecorationBox(
                        value = stateOne.text.toString(),
                        innerTextField = it,
                        enabled = true,
                        singleLine = true,
                        visualTransformation = VisualTransformation.None,
                        label = {
                            Text("Username")
                        },
                        placeholder = {
                            Text("Username Placeholder")
                        },
                        interactionSource = remember { MutableInteractionSource() }
                    )
                }
            )
            BasicSecureTextField(
                state = stateOTwo,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                decorator = {
                    TextFieldDefaults.DecorationBox(
                        value = stateOTwo.text.toString(),
                        innerTextField = it,
                        enabled = true,
                        singleLine = true,
                        visualTransformation = VisualTransformation.None,
                        label = {
                            Text("Password")
                        },
                        placeholder = {
                            Text("Password Placeholder")
                        },
                        interactionSource = remember { MutableInteractionSource() }
                    )
                }
            )
        }
    }
}

You can find the code in my GitHub repository: BasicTextFieldExample - MainActivity.kt.

[KotlinLeaner]

The library versions I'm using are specified here:
libs.versions.toml

[KotlinLeaner]

Screen Recording 2025-01-24 at 13.15.25.mov

Screen Recording 2025-01-24 at 13.15.25.mov

[Zach Klippenstein (he/him) [MOD]]

Did you look at how material text field does it?

[KotlinLeaner]

yes i found the problem it's because of

val interactionSourceOne = remember { MutableInteractionSource() }