CODEWITHSUNDEEP
androidandroid-jetpack-compose
Brian O
Brian O

Reputation: 192

JetPack Compose: Execute KeyBoardAction

I am using compose version 1.0.0-beta05. I'm trying to execute a search when the keyboard ImeAction.Search icon is clicked. I tried doing as below.

TextField(
    modifier = Modifier
        .fillMaxWidth(.9f)
        .padding(8.dp)
        .background(MaterialTheme.colors.surface),
    value = query,
    onValueChange = { userInput ->
        viewModel.onQueryChanged(userInput)
    },
    label = { Text(text = "Search") },
    textStyle = TextStyle(color = MaterialTheme.colors.onSurface),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.Search
        ),
    leadingIcon = {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = null
        )
    },
    onImeActionPerformed = { action, softKeyboardController ->
        if (action == ImeAction.Search) {
            viewModel.executeSearch(query)  
            softKeyboardController.hideSoftwareKeyboard()
        }
    },
)

However I get None of the following functiosn can be called with arguments suppplied. I checked out and saw that onImeActionPerformed is not one of the TextField() argument. So I tried using KeyBoardActions as below:

TextField( 
    modifier = Modifier
        .fillMaxWidth(.9f)
        .padding(8.dp)
        .background(MaterialTheme.colors.surface),
    value = query,
    onValueChange = { userInput ->
        viewModel.onQueryChanged(userInput)
    },
    label = { Text(text = "Search") },
    textStyle = TextStyle(color = MaterialTheme.colors.onSurface),  
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Text,
        imeAction = ImeAction.Search
    ),
    leadingIcon = {
        Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = null
        )
    },
    keyboardActions = KeyboardActions(
        onSearch = {
            viewModel.executeSearch(query)
        }
    )
)

and here is my ViewModel class

@HiltViewModel
class RecipeListViewModel @Inject constructor(
    private val repository: RecipeRepository,
    @Named("auth_token") private val authToken: String
) : ViewModel() {

    val recipes: MutableState<List<Recipe>> = mutableStateOf(ArrayList())
    val query = mutableStateOf("")

    init {
        executeSearch(query.value)
    }

    fun executeSearch(query: String) {
        viewModelScope.launch {
            val result = repository.search(
                token = authToken,
                page = 1,
                query = "beef"
            )
            recipes.value = result
        }
    }

    fun onQueryChanged(query:String){
        this.query.value = query
    }
}

My goal is to execute a search and update UI. I'm quite stuck here

Upvotes: 1

Views: 3994

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363507

onImeActionPerformed was deprecated with 1.0.0-alpha12.

Use KeyboardActions.
Something like:

   val keyboardController = LocalSoftwareKeyboardController.current

    keyboardActions = KeyboardActions(
        onSearch = {
            //...
            keyboardController?.hide()
        }
    )

Upvotes: 4

Related Questions