0

I want to make a common dropdown for two TextField. I have manage to do something like following. But there is a problem with focusing. When I click again on the second TextField to open dropdown, it opens the dropdown but focus to first one which I don't want.

The Code:

data class Dummy(
    val a: String,
    val b: String,
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DoubleTextFieldDropDown(
    selectedDummy: Dummy?,
    onSelectedChange: (Dummy?) -> Unit,
    list: List<Dummy>
) {
    var exposed by remember { mutableStateOf(false) }
    var textA by remember(selectedDummy) { mutableStateOf(selectedDummy?.a ?: "") }
    var textB by remember(selectedDummy) { mutableStateOf(selectedDummy?.b ?: "") }

    val filtered by remember {
        derivedStateOf {
            list.filter {
                if (textA.isNotEmpty()) it.a.contains(textA)
                else it.b.contains(textB)
            }
        }
    }

    ExposedDropdownMenuBox(
        expanded = exposed,
        onExpandedChange = { exposed = it },
    ) {
        Row(
            modifier = Modifier.menuAnchor(MenuAnchorType.PrimaryEditable)
        ) {
            OutlinedTextField(
                value = textA,
                onValueChange = { textA = it },
                modifier = Modifier.weight(1F),
                label = { Text("Text A") }
            )

            OutlinedTextField(
                value = textB,
                onValueChange = { textB = it },
                modifier = Modifier.weight(1F),
                label = { Text("Text B") }
            )
        }

        ExposedDropdownMenu(
            expanded = exposed,
            onDismissRequest = { exposed = false }
        ) {
            filtered.forEach {
                DropdownMenuItem(
                    onClick = {
                        onSelectedChange(it)
                        exposed = false
                    },
                    text = { Text("${it.a} | ${it.b}") },
                )
            }
        }
    }
}

There is data class Dummy which has a and b. I want to filter list (List) (used by dropdown) based on text fields. If first fields get input the list filter based on a. if second field get input the list filter based on b. The drop down shows items as a + " | " + b

Preview This is the image when the code runs how it is looks on the ui

I don't want first field to get focused when I click for.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.