improve focus util

epicweb-dev · Jul 25, 2023 · 3d6e494 · 3d6e494
1 parent 6d7c504
commit 3d6e494
Show file tree

Hide file tree

Showing 11 changed files with 0 additions and 253 deletions.
diff --git a/exercises/03.schema-validation/03.solution.conform-form/app/utils/misc.ts b/exercises/03.schema-validation/03.solution.conform-form/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/04.file-upload/01.problem.multi-part/app/utils/misc.ts b/exercises/04.file-upload/01.problem.multi-part/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/04.file-upload/01.solution.multi-part/app/utils/misc.ts b/exercises/04.file-upload/01.solution.multi-part/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/04.file-upload/02.problem.file-validation/app/utils/misc.ts b/exercises/04.file-upload/02.problem.file-validation/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/04.file-upload/02.solution.file-validation/app/utils/misc.ts b/exercises/04.file-upload/02.solution.file-validation/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/01.problem.nested/app/utils/misc.ts b/exercises/05.complex-structures/01.problem.nested/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/01.solution.nested/app/utils/misc.ts b/exercises/05.complex-structures/01.solution.nested/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/02.problem.lists/app/utils/misc.ts b/exercises/05.complex-structures/02.problem.lists/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/02.solution.lists/app/utils/misc.ts b/exercises/05.complex-structures/02.solution.lists/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/03.problem.add-remove/app/utils/misc.ts b/exercises/05.complex-structures/03.problem.add-remove/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}
diff --git a/exercises/05.complex-structures/03.solution.add-remove/app/utils/misc.ts b/exercises/05.complex-structures/03.solution.add-remove/app/utils/misc.ts
@@ -1,6 +1,5 @@
 import { useFormAction, useNavigation } from '@remix-run/react'
 import { clsx, type ClassValue } from 'clsx'
-import { useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 /**
@@ -78,25 +77,3 @@ export function useIsSubmitting({
 		navigation.formMethod === formMethod
 	)
 }
-
-/**
- * A hook that focuses the first invalid element in a form.
- */
-export function useFocusInvalid(
-	formEl: HTMLFormElement | null,
-	hasErrors: boolean,
-) {
-	useEffect(() => {
-		if (!formEl) return
-		if (!hasErrors) return
-
-		if (formEl.matches('[aria-invalid="true"]')) {
-			formEl.focus()
-		} else {
-			const firstInvalid = formEl.querySelector('[aria-invalid="true"]')
-			if (firstInvalid instanceof HTMLElement) {
-				firstInvalid.focus()
-			}
-		}
-	}, [formEl, hasErrors])
-}