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
TextInputcomponent withkeyboardTypeset topassword
Determine if your app is affected
Your app needs this fix if both of the following are true:
- You use the
TextInputcomponent withkeyboardTypeset topasswordand show/hide password buttons in the keyboard UI. - You process
onSubmitEditing()without checking the value ofe.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".
Related content
Last updated: Apr 15, 2026
