Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced65 menitBahasa Indonesia

Focus Management

Mengarahkan perhatian user ke feedback validasi yang penting tanpa mencuri fokus saat mereka masih mengisi form.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan mengapa focus management penting setelah submit gagal
Memilih fokus ke error summary atau field invalid pertama secara sadar
Menggunakan onInvalid dan setFocus sebagai pola React Hook Form
Menguji alur keyboard tanpa mengganggu proses mengetik user

AccessibilityKeyboardReact Hook FormFocus Management

Isi lesson

6 blok

1.
Feedback yang muncul di luar fokus mudah terlewatBelum selesaiWajib
2.
Fokuskan field invalid pertama saat submit gagalBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Fokus bukan efek visualBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Feedback yang muncul di luar fokus mudah terlewat

Wajib

Setelah submit gagal, user keyboard atau screen reader dapat tetap berada di button submit sementara error muncul di tempat lain. Pindahkan fokus dengan tujuan yang jelas: ke error summary jika form memiliki banyak masalah dan user perlu gambaran, atau ke field invalid pertama jika perbaikannya langsung. Kedua pilihan dapat valid; pilih berdasarkan bentuk form dan kemudian konsisten.

Jangan memindahkan fokus setiap kali user mengetik atau pada error kecil yang muncul saat input masih aktif. Fokus adalah posisi kerja user. Memindahkannya tanpa alasan membuat input terasa melawan user. Pastikan ringkasan atau field yang dituju benar-benar dapat menerima fokus dan terlihat setelah scroll.

Bagian ini memengaruhi progres lesson.

Fokuskan field invalid pertama saat submit gagal

Wajib

tsx

import { useForm, type FieldErrors } from "react-hook-form";

type ProfileFormValues = {
  displayName: string;
  email: string;
};

export function ProfileForm() {
  const { handleSubmit, register, setFocus } = useForm<ProfileFormValues>();

  function onValid(values: ProfileFormValues) {
    console.log(values);
  }

  function onInvalid(errors: FieldErrors<ProfileFormValues>) {
    const firstField = Object.keys(errors)[0] as keyof ProfileFormValues;

    if (firstField) {
      setFocus(firstField);
    }
  }

  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)} noValidate>
      <input aria-label="Nama tampilan" {...register("displayName")} />
      <input aria-label="Email" {...register("email")} />
      <button type="submit">Simpan profile</button>
    </form>
  );
}

onInvalid dipanggil saat validation form gagal. Contoh memilih key error pertama dan mengirim fokus ke field itu. Pada form yang memakai error summary, strategi lain adalah memfokuskan summary yang diberi tabIndex={-1}; gunakan satu strategi yang dapat dipahami user dan uji urutan tab-nya.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Focus first invalid profile field

Tambahkan onInvalid agar form memindahkan fokus ke field profile pertama yang bermasalah setelah submit gagal. Preview tidak menjalankan React Hook Form.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan form paling tepat memindahkan fokus ke feedback validasi?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Fokus bukan efek visual

Scroll ke elemen tidak selalu sama dengan memindahkan fokus. Coba form hanya dengan keyboard: submit data salah, dengarkan atau amati posisi fokus, perbaiki error, lalu lanjutkan sampai submit berhasil. Jangan mengandalkan console atau screenshot sebagai bukti focus flow sudah benar.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Setelah submit gagal, fokus dapat diarahkan ke summary atau field invalid pertama.
Pilih satu strategi berdasarkan kebutuhan form dan buat perilakunya konsisten.
Jangan mencuri fokus saat user masih mengetik atau hanya karena error berubah.
Uji submit, tab order, scroll, dan recovery dengan keyboard pada app lokal.
Berikutnya, disabled state menjaga submit ganda tanpa mengunci kemampuan user memperbaiki form.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Feedback yang muncul di luar fokus mudah terlewat.

Memuat progres Review module