Keyboard enter event

[Seong_Cho]

Hi.

My app provide a search function.
Users usually press enter button to search but when they press the button nothing happens.

So they have to click a search button on the screen for searching.

I worked hard to develop my app service but this one little issue make users think my app is not good enough.

It’s sad.

It would be great if pressing enter button on the keyboard trigger actions with input value.

[Mari]

Hi @Seong_Cho,

The input “onBlur” event fires when the user presses Enter, so you can use that one to run your search logic:

[JOHN_WORSHAM]

Thats interesting. I would have thought that would trigger an onFocus event.

[Mari]

Here’s when the different events fire:

Value of input changes → onChange
When you click into the input → onFocus
When the input loses focus because you clicked somewhere else or pressed Enter → onBlur

Focusing: focus/blur

[Brenton_Richards]

Thanks for this. However, how does one go about that? The blur event is only available inside the component and components don’t have access to app level data or page variables. Even open page doesn’t seem to work and I would need to pass the search query to through a page parameter. Thanks

[Dimos_Vamvourellis]

if you are not using the primitive input component you need to add an event in the composite component,
i show how here

Tap component in Composite component / Add Event in Composite component

actually you can add click events / or any event in a composite component like this [image] then go to properties then event and add a new event [image] Then in the view, add the trigger event in the component tap of the component you want and define it with the event you just made [image] And then outside the composite component use the trigger event to bind with whatever you want Hope it helps!

[Mari]

@Brenton_Richards the Input field component has now been modified to expose the internal events by default.

[Brenton_Richards]

Great timing on that one! Haha.

[Brenton_Richards]

Still find the whole thing a bit complex for what’s needed. But the update seems to have mitigated all this. Thanks for the help!

[Dimos_Vamvourellis]

yeah sure its better now, but keep this guide in mind because it works for triggering events n any composite component (those that you have to double click to open)

[Brenton_Richards]

For sure, I just need to play around with the event. Thanks again.

[Geoff_Harcombe]

Hi,
I tried to use the “onBlur” for my app, but found that it executed (as expected) every time something was clicked on the screen after the text input was selected. For my purposes this wasn’t an acceptable workaround.
Instead, I did the following, which worked for my purposes:

1. I set the Input Field to be multiline (this took some formatting of the screen to look good)
2. Within the Input Field I used the “onChange” event with an “If Condition” to look for a line break in the Input Field. The formula for this was:
   MATCHES_REGEX(pageVars.varAnswer, “\n”)
   Note that “pageVars.varAnswer” is the variable attached to the Input Field
3. If the line break was found, I then set a true/false variable to true which then triggered the result I wanted when “enter” is pressed.

This worked for my app, hopefully this is useful for others too!