How clear focus for BasicTextField in Jetpack Compose?

Question

I have a Jetpack Compose (Beta04) BasicTextField (with decorationBox). How can I clear the focus?

I have tried with focusRequester but this doesn't works:

val focusRequester = remember { FocusRequester() }

// ...

BasicTextField(modifier = Modifier.focusRequester(focusRequester), /* ... */)

// ...

placesFocusRequester.freeFocus()

Answer 1

@Composable 
fun InputEditText(
    value: String,
    modifier: Modifier,
    onValueChange: (String) -> Unit,
    textStyle: TextStyle, hintTextStyle: 
    TextStyle, placeHolderString: String = "",
    enabled: Boolean = true, readOnly: Boolean = false,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    cursorColor: Color = Color.Black,
    imageVector: ImageVector,
    iconTint: Color = Color.Gray,
    backColor: Color = Color.White,
    borderColor: Color = Color.LightGray,
    showPassword: Boolean = false,
    backGroundShape: Shape = RectangleShape,
    passwordVisible: MutableState,
    error: String,
    howError: Boolean = false 
) { 
    BasicTextField( 
        visualTransformation = if (showPassword) { 
            if (!passwordVisible.value) VisualTransformation.None else PasswordVisualTransformation() 
        } else { VisualTransformation.None }, 
        value = value, 
        onValueChange = onValueChange, 
        modifier = modifier, 
        textStyle = textStyle, 
        decorationBox = { innerTextField -> 
            Column { 
                Row( 
                    modifier = Modifier
                        .background(backColor, backGroundShape)
                        .border( width = 1.dp, color = if (showError) Color.Red else borderColor, backGroundShape ) 
                        .padding(14.dp) 
                        .fillMaxWidth(), 
                    horizontalArrangement = Arrangement.Start, 
                    verticalAlignment = CenterVertically 
                ) { 
                    Icon(
                        imageVector = imageVector, 
                        contentDescription = null, 
                        tint = iconTint, 
                        modifier = Modifier.padding(end = 6.dp) 
                    ) 
                    if (value.isEmpty()) { 
                        Text(
                            text = placeHolderString, 
                            color = hintTextStyle.color, 
                            fontSize = hintTextStyle.fontSize, 
                            fontStyle = hintTextStyle.fontStyle, 
                            fontFamily = hintTextStyle.fontFamily, 
                            textAlign = hintTextStyle.textAlign, 
                            fontWeight = hintTextStyle.fontWeight, 
                            style = hintTextStyle 
                        ) 
                    } 
                    innerTextField() 
                    if (showPassword) { 
                        Column(
                            modifier = Modifier.fillMaxWidth(), 
                            verticalArrangement = Arrangement.Bottom, 
                            horizontalAlignment = Alignment.End 
                        ) { 
                            Image( 
                                painter = painterResource(
                                    id = if (!passwordVisible.value) 
                                        R.drawable.ic_baseline_visibility_off_24 
                                    else R.drawable.ic_baseline_visibility_24
                                ), 
                                contentDescription = "Cart button icon", 
                                modifier = Modifier
                                    .size(24.dp)
                                    .clickable { 
                                        passwordVisible.value = !passwordVisible.value 
                                    }, 
                                colorFilter = ColorFilter.tint(color = iconTint) 
                            ) 
                        } 
                    } 
                    if (showError) { 
                        Column(
                            modifier = Modifier.fillMaxWidth(), 
                            verticalArrangement = Arrangement.Bottom, 
                            horizontalAlignment = Alignment.End 
                        ) { 
                            Icon(
                                imageVector = Icons.Filled.Info, 
                                contentDescription = null, 
                                tint = Color.Red, 
                                modifier = Modifier.padding(end = 6.dp) 
                            ) 
                        } 
                    } 
                } 
                if (showError) { 
                    Row(modifier = Modifier.fillMaxWidth()) { 
                        Text(
                            text = error, 
                            modifier = Modifier.fillMaxWidth(), 
                            style = TextStyle(
                                color = Color.Red, 
                                fontFamily = FontFamily.SansSerif, 
                                fontSize = 11.sp, 
                                textAlign = TextAlign.Start, 
                            ) 
                        ) 
                    } 
                } 
            } 
        }, 
        enabled = enabled,
        readOnly = readOnly, 
        singleLine = singleLine, 
        maxLines = maxLines, 
        keyboardOptions = keyboardOptions, 
        keyboardActions = keyboardActions, 
        cursorBrush = SolidColor(cursorColor) 
    ) 
}

Answer 2

To clear focus from the currently focused component you can use the FocusManager.clearFocus method:

    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    var value by rememberSaveable { mutableStateOf("initial value") }
    BasicTextField(
        value = value,
        onValueChange = { value = it },
        decorationBox = { innerTextField ->
            Row(
                Modifier
                    .background(Color.LightGray, RoundedCornerShape(percent = 30))
                    .padding(16.dp)
                    .focusRequester(focusRequester)
            ) {
                //...
                innerTextField()
            }
        }
    )
  
    Button(onClick = { focusManager.clearFocus() }) {
        Text("Clear focus")
    }