# Keyboard automatically dismisses when appropriate

- **Pattern:** `ab-001975` (`mobile-ux-patterns.keyboard-input.keyboard-dismiss`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001975
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001975)

## Why it matters

A keyboard that lingers after form submit covers half the destination screen — users reach the home feed and see only the top row, then tap elsewhere to dismiss before they can scroll. On slow networks, this creates the impression that nothing happened after submit. Leaving the keyboard open during navigation transitions also makes screen-transition animations stutter on low-end Android because the keyboard reposition competes with the transition on the UI thread.

## Severity rationale

Low because users can dismiss the keyboard manually, but the lingering state degrades perceived submit success.

## Remediation

Call `Keyboard.dismiss()` at the top of every submit handler and on navigation transitions via React Navigation's `beforeRemove` listener:

```tsx
import { Keyboard } from 'react-native';
const handleSubmit = async () => { Keyboard.dismiss(); await submitForm(); };
useEffect(() => navigation.addListener('beforeRemove', () => Keyboard.dismiss()), [navigation]);
```

Set `keyboardShouldPersistTaps="handled"` on any wrapping `ScrollView` so a tap outside the input also dismisses.

## Detection

- **ID:** `keyboard-dismiss`
- **Severity:** `low`
- **What to look for:** Check all form submission handlers and navigation transitions. Look for `Keyboard.dismiss()` calls, `onSubmitEditing` handlers, and `keyboardShouldPersistTaps` settings. Count all forms and verify each has keyboard dismissal on submit.
- **Pass criteria:** Keyboard is dismissed after form submission via `Keyboard.dismiss()` or equivalent. Keyboard does not linger when navigating away from input screens. All form submit handlers include keyboard dismissal.
- **Fail criteria:** Keyboard remains open after form submission, or users must manually dismiss it by tapping outside the input area. Missing `Keyboard.dismiss()` in submit handlers.
- **Skip (N/A) when:** App has no text input fields.
- **Detail on fail:** Name the specific form or screen. `"After signing in, keyboard remains open on the home screen — must tap elsewhere to dismiss."` or `"Navigating from login to home screen leaves keyboard open."`
- **Remediation:** Dismiss keyboard on submit and navigation:

  ```tsx
  import { Keyboard } from 'react-native';

  const handleSubmit = async () => {
    Keyboard.dismiss();
    await submitForm();
  };

  <TextInput
    placeholder="Message"
    returnKeyType="send"
    onSubmitEditing={handleSubmit}
  />

  // Or in useEffect for navigation
  useEffect(() => {
    const unsubscribe = navigation.addListener('beforeRemove', () => {
      Keyboard.dismiss();
    });
    return unsubscribe;
  }, [navigation]);
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001975