IssueTracker

Jetpack Compose version: 1.8.0-beta01

Jetpack Compose component used: TextField

Code Sample to Reproduce

var flag by remember { mutableStateOf(true) }
val state = rememberTextFieldState()
val focusRequester = remember { FocusRequester() }
val buttonInteractionSource = remember { MutableInteractionSource() }
val buttonFocused by buttonInteractionSource.collectIsFocusedAsState()
TextField(
    state = state,
    modifier = Modifier.padding(16.dp),
    trailingIcon = {
        Box(
            modifier = Modifier
                .size(32.dp)
                .background(
                    (if (buttonFocused) Color.Red else Color.Blue)
                        .copy(alpha = 0.7f).compositeOver(Color.White)
                )
                .focusRequester(focusRequester)
                .focusable(interactionSource = buttonInteractionSource)
                .pointerInput(Unit) {
                    awaitEachGesture {
                        awaitFirstDown()
                        focusRequester.requestFocus()
                        flag = !flag
                    }
                },
            contentAlignment = Alignment.Center
        ) {
            Text(if (flag) "H" else "V", style = TextStyle(color = Color.White))
        }
    },
    lineLimits = if (flag) TextFieldLineLimits.SingleLine else TextFieldLineLimits.Default
)

Note that the lineLimits argument is there just to cause a recomposition of TextField, which triggers the bug. The line limits themselves are not related to the bug.

1. Run the code above.
2. Click inside the text field. It should receive focus.
3. Click the trailing icon. It should become green and the text field should lose focus.
4. Click inside the text field again. It should become focused, but does not.

Analysis

The problem appears to be with focus management; not the text field itself. The issue doesn't reproduce with ComposeUiFlags.isTrackFocusEnabled = false (although it seems to trigger a different issue - the text field steals the focus back on each click).

The issue appears to be that when the "button" becomes focused, TextFieldDecoratorModifierNode.onFocusEvent receives an incorrect call (from FocusInvalidationManager.invalidateNodesOptimized) with a FocusState.Active argument.

Perhaps the algorithm in FocusInvalidationManager.invalidateNodesOptimized is incorrect? It goes up the modifier node tree, starting from the active focus target node, until it encounters the first FocusTargetNode in focusEventNodes (means invalidated?), and then tells it that it is FocusState.Active. In the case of the issue, we have is a chain like this:

• (from BasicTextField itself):
• TextFieldDecoratorModifierNode , which is a FocusEventModifierNode
• FocusableNode with a FocusTargetNode delegate
• (from the trailing icon):
• FocusableNode with a FocusTargetNode delegate.

Now, TextFieldDecoratorModifierNode expects to be told FocusState.Active when the FocusTargetNode of the text field is active. But the logic of FocusInvalidationManager.invalidateNodesOptimized is such that it will also receive FocusState.Active when the FocusTargetNode of the button is active. This leads to confusion, because the text field itself is not focused at this point, but TextFieldDecoratorModifierNode thinks that it is (isElementFocused is true), and so it doesn't request focus on click.