Guidance about how to use keyboard input events

Vega Open Beta Knowledge Base
1

Events generated upon keyboard input actions

TextInput component (API reference can be found here) exposes an interface onSubmitEditing which is triggered for multiple keyboard input actions. It can be triggered for actions such as “done”, “go”, “search”, “next”, “previous” etc and also for custom actions which are integer values. Up till now, this trigger is not fired for show_password and hide_password actions. Starting in 0.21, the onSubmitEditing callback will also be triggered if user clicks on show / hide password in keyboard UI. The additional callback can cause unexpected behavior for applications which are listening to onSubmitEditing without checking the action that triggered it.

onSubmitEditing already provides the action type through e.nativeEvent.submitAction and this value can be checked to identify which action triggered this callback. As a best practice, we recommend to check the type of submitAction before performing the respective business logic. If the current implementation is not handling this check, the respective business logic will get executed if user clicks on show and hide password cases.

Example scenario for an unexpected behavior

Network password dialog has show/hide password buttons. When the user clicks the “done” button after entering the password onSubmitEditing will be triggered with e.nativeEvent.submitAction as “done”. Consider a scenario in which, the application hasn’t checked the submitAction type before attempting to connect to the network. The connect workflow will get triggered if user clicks on show / hide password as well.

Under what circumstances do you need to take action?

You need to take action if:

  • You are using React Native for Vega’s TextInput component with keyboardType as Password and show/hide password buttons in keyboard UI
  • You are processing onSubmitEditing without checking the type of e.nativeEvent.submitAction

What is the reason for this change?

Project Vega’s built-in keyboard operates in a passive mode. The application has to communicate if the password should be hidden / shown every time it opens the keyboard. However, React Native for Vega is not providing the information about the password visibility to the applications so that the current state can be saved.

Example code

If your current code looks like

<TextInput
        placeholder="placeholder text for password"
        keyboardType='password'
        returnKeyType='done'
        onSubmitEditing={(e) => {
            console.log("Password - " + e.nativeEvent.text);
        }}
/>

Then you should change this to :

<TextInput
        placeholder="placeholder text for password"
        keyboardType='password'
        returnKeyType='done'
        onSubmitEditing={(e) => {
            if(e.nativeEvent.submitAction === 'done') {
                console.log("Password - " + e.nativeEvent.text);
            }
        }}
/>

What are the other values for e.nativeEvent.submitAction?

For completeness, the code snippet below show the other values that e.nativeEvent.submitActioncan take.

<TextInput
        placeholder="placeholder text for password"
        keyboardType='password'
        returnKeyType='done'
        onSubmitEditing={(e) => {
            if(e.nativeEvent.submitAction === 'done') {
                console.log("Password - " + e.nativeEvent.text);
            } else if (e.nativeEvent.submitAction === 'show_password') {
                console.log("Password is visible now");
            } else if(e.nativeEvent.submitAction === 'hide_password') {
                console.log("Password is hidden now");
            }
        }}
/>
July 15th OS update