I'm trying to add a button that opens search and keyboard when clicked.
Something like this:
But i get an error
FocusRequester is not initialized. Here are some possible fixes:
1. Remember the FocusRequester: val focusRequester = remember { FocusRequester() }
2. Did you forget to add a Modifier.focusRequester() ?
3. Are you attempting to request focus during composition? Focus requests should be made in
response to some event. Eg Modifier.clickable { focusRequester.requestFocus() }
I came to the conclusion that this is due to animatedvisibility because without it everything works. That is, when both the button and the search are initially visible, everything works.
I suppose that the cursor has nowhere to stand because it is not immediately updated but I do not know how else to do it
My Code:
topBar = {
TopAppBar(
actions = {
// val keyboardController = LocalSoftwareKeyboardController.current //val focusRequester = remember { FocusRequester() }
var visibleSearchBar by remember {
mutableStateOf(false)
}
var visiblecurrentSearch by remember {
mutableStateOf(true)
}
val state = remember { mutableStateOf(TextFieldValue("")) }
AnimatedVisibility(visible = visiblecurrentSearch) {
IconButton(onClick = {
visibleSearchBar = true
visiblecurrentSearch = false
//focusRequester.requestFocus()
//keyboardController?.show()
}) {
Icon(painter = painterResource(id = R.drawable.ic_baseline_search_24),
contentDescription = "search")
}
}
AnimatedVisibility(visible = visibleSearchBar) {
TextField(
value = state.value,
onValueChange = { value ->
state.value = value
},
enabled = true,
shape = RoundedCornerShape(25.dp),
modifier = Modifier
//.focusRequester(focusRequester)
.fillMaxWidth()
.padding(end = 10.dp)
.scale(scaleX = 1F, scaleY = 0.9F),
textStyle = TextStyle(color = Color.Black),
placeholder = {
Text(
text = "Search",
fontSize = 14.sp,
)
},
keyboardActions = KeyboardActions(
onDone = {
//movie = list
}
),
leadingIcon = {
Icon(
Icons.Default.Search,
contentDescription = "",
modifier = Modifier
.size(20.dp)
)
},
trailingIcon = {
IconButton(
onClick = {
state.value =
TextFieldValue("") =
visibleSearchBar = false
visiblecurrentSearch = true
}
) {
Icon(
Icons.Default.Close,
contentDescription = "",
modifier = Modifier
.size(20.dp)
)
}
},
singleLine = true,
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Black,
cursorColor = Color.Black,
leadingIconColor = Color.Black,
trailingIconColor = Color.Black,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Black
)
)
}
},
title = {
},
navigationIcon = {
IconButton(onClick = {}) {
Icon(painter = painterResource(id = R.drawable.ic_baseline_menu_24),
contentDescription = "menu")
}
},
backgroundColor = Color.White,
contentColor = Color.Black,
elevation = 3.dp
)
}
CodePudding user response：
As per the suggested possible fixes try using focusrequester in SideEffect
val focusRequester = remember { FocusRequester() }
LaunchedEffect(visibleSearchBar){
if (visibleSearchBar)
focusRequester.requestFocus()
}
topBar = {
TopAppBar(
actions = {
// val keyboardController = LocalSoftwareKeyboardController.current //val focusRequester = remember { FocusRequester() }
var visibleSearchBar by remember {
mutableStateOf(false)
}
var visiblecurrentSearch by remember {
mutableStateOf(true)
}
val state = remember { mutableStateOf(TextFieldValue("")) }
AnimatedVisibility(visible = visiblecurrentSearch) {
IconButton(onClick = {
visibleSearchBar = true
visiblecurrentSearch = false
//focusRequester.requestFocus()
//keyboardController?.show()
}) {
Icon(painter = painterResource(id = R.drawable.ic_baseline_search_24),
contentDescription = "search")
}
}
AnimatedVisibility(visible = visibleSearchBar) {
TextField(
value = state.value,
onValueChange = { value ->
state.value = value
},
enabled = true,
shape = RoundedCornerShape(25.dp),
modifier = Modifier
.focusRequester(focusRequester)
.fillMaxWidth()
.padding(end = 10.dp)
.scale(scaleX = 1F, scaleY = 0.9F),
textStyle = TextStyle(color = Color.Black),
placeholder = {
Text(
text = "Search",
fontSize = 14.sp,
)
},
keyboardActions = KeyboardActions(
onDone = {
//movie = list
}
),
leadingIcon = {
Icon(
Icons.Default.Search,
contentDescription = "",
modifier = Modifier
.size(20.dp)
)
},
trailingIcon = {
IconButton(
onClick = {
state.value =
TextFieldValue("") =
visibleSearchBar = false
visiblecurrentSearch = true
}
) {
Icon(
Icons.Default.Close,
contentDescription = "",
modifier = Modifier
.size(20.dp)
)
}
},
singleLine = true,
colors = TextFieldDefaults.textFieldColors(
textColor = Color.Black,
cursorColor = Color.Black,
leadingIconColor = Color.Black,
trailingIconColor = Color.Black,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Black
)
)
}
},
title = {
},
navigationIcon = {
IconButton(onClick = {}) {
Icon(painter = painterResource(id = R.drawable.ic_baseline_menu_24),
contentDescription = "menu")
}
},
backgroundColor = Color.White,
contentColor = Color.Black,
elevation = 3.dp
)
}
CodePudding user response：
You can use something like:
val focusRequester = remember { FocusRequester() }
LaunchedEffect(visibleSearchBar){
if (visibleSearchBar)
focusRequester.requestFocus()
}
AnimatedVisibility(visible = visibleSearchBar) {
TextField(
//...
modifier = Modifier
.focusRequester(focusRequester)
.fillMaxWidth()
.padding(end = 10.dp)
.scale(scaleX = 1F, scaleY = 0.9F),
//...
)