Close mobile keyboard on go/enter/return key

Support
1

We’ve got a search feature which uses an input field defined in an HTML Element like this:

<input id="search-input" v-model="app.searchQueries.permit" class=" h-12 rounded-r px-4 border border-gray-500 flex-1 focus:outline-none" @keyup="namedAction('search',{})" placeholder="Search projects">

I’d like mobile users to be able to both perform the search AND close the keyboard by pressing the enter key, as they can on other sites, but we haven’t been able to figure out how to do it, or if it’s possible. We tried using a form for input instead, but that didn’t render at all.

2

Hmm I’d think this would be a solved thing in the web world.

Did you solve this? Was there a known solution that you could not implement?

3

No, I haven’t solved this yet. The root issue seems to be that the event object doesn’t exist on mobile. So when I add @keyup.enter="alert(event.keyCode)" to my input object, I don’t get an alert on mobile devices, but I do on Desktop.

Taking that logic a step further, I should be able to access the event in my named action by passing it in: @keyup="namedAction('search',{event})". But again, event only exists on desktop and is undefined on mobile.

If I was ever able to access the triggering event I could probably use this method to close the keyboard: https://stackoverflow.com/a/11160055/1327931.

4

This might explain why @keyup.enter doesn’t work on Android, although I’ve gotten the same results on iOS as well, and this issue doesn’t mention iOS: https://github.com/vuejs/vue/issues/7651

It also doesn’t explain why the event does exist on mobile.

5

Regarding passing the event object,
you will have to wrap the namedAction function with a function to forward the arguments into it.

Background
Vue is expecting a pure function to be passed in the @click trigger.
So something like this would be common:

@click="myClickHandler"

But in BF we usually just want to pass some context in like a row or an id so instead we can pass the Vue @click a pure function like this:

@click="function( ) { namedAction('theNamedActionName' , { theArgs: arguments } ) } "

then action.options.theArgs will have the arguments that are passed by Vue

HTH

6

BF Docs say otherwise and the format from the docs does work on Desktop.

If you could share a working code snippet of passing a keyup or keypress event into a named action, which works on mobile, I’d appreciate it since I cannot get it to work (using bf-latest).

7

I forgot to say that I tried the anonymous function method you suggested and got the same result as before.