Handle onSubmitEditing Events in Vega Password Fields

In this article, you’ll add submit action filtering to password TextInput components to prevent unexpected behavior. The onSubmitEditing() callback fires for multiple keyboard actions, including show and hide password toggles. Without checking which action triggered the callback, your business logic (such as connecting to a network) might execute when a user simply toggles password visibility.

Prerequisites

Vega development environment set up
React Native app using the TextInput component with keyboardType set to password

Determine if your app is affected

Your app needs this fix if both of the following are true:

You use the TextInput component with keyboardType set to password and show/hide password buttons in the keyboard UI.
You process onSubmitEditing() without checking the value of e.nativeEvent.submitAction.

For example, the following code triggers the password handler for any submit action, including show and hide password toggles.

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

Add the submitAction check

Filter the onSubmitEditing() callback by checking e.nativeEvent.submitAction before running your business logic. This makes sure only the intended action (such as “done”) triggers your code.

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

Handle additional submitAction values

You might want to respond to other submit actions beyond “done”. The submitAction value corresponds to returnKeyType values plus custom values set using auxOptions. The following example shows how to handle password visibility toggles alongside the done action.

<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");
            }
        }}
/>

Other possible submitAction values include “go”, “search”, “next”, and “previous”.

TextInput API reference

​Prerequisites

​Determine if your app is affected

​Add the submitAction check

​Handle additional submitAction values

​Related content

Prerequisites

Determine if your app is affected

Add the submitAction check

Handle additional submitAction values

Related content