Field focus tracking

[ravinggenius]

I only recently got started with the form library. Can someone help me understand why onBlur is handled but onFocus is not? It seems obvious to include field.handleFocus since field.handleBlur is already defined.

What I really want though is field.state.meta.isFocused (or similar). What is the recommended approach to tracking field focus? I know I can manually manage it myself (awkwardly because field.handleBlur still needs to be called), but that gets really tedious for more than a few fields.

[ravinggenius]

I did some searches here on GitHub. I even asked Claude for an explanation, but I couldn't find a definitive answer. I was surprised because I would expect others to have this same question.

[ravinggenius]

Here is a simplified email field showing what I have to do (red) for proper focus management versus what I'd like to have to do (green). My solution works, but it's not what I'd consider elegant.

-// define a hook to abstract as much focus logic as possible while maintaining
-// form library functionality. obviously this is in a separate file
-const useFocusBlur = () => {
-	const [isFocused, setIsFocused] = useState(false);
-
-	return {
-		isFocused,
-		handleFocus: () => {
-			setIsFocused(true);
-		},
-		makeHandleBlur: (field: AnyFieldApi) => () => {
-			field.handleBlur();
-			setIsFocused(false);
-		}
-	};
-};

-// set variable *per field*
-const emailFocus = useFocusBlur();

<form.Field name="email">
	{(field) => (
		<TextField
			id="email"
			label={t("name.label")}
-			// ugly spread to include extra metadata versus clean meta=meta
-			meta={{ ...field.state.meta, isFocused: emailFocus.isFocused }}
+			meta={field.state.meta}
			name={field.name}
-			// call wrapper function so focus can be be properly set. these
-			// will be different for every field
-			onFocus={emailFocus.handleFocus}
-			onBlur={emailFocus.makeHandleBlur(field)}
+			onFocus={field.handleFocus}
+			onBlur={field.handleBlur}
			onChange={(e) => field.handleChange(e.target.value)}
			required
			value={field.state.value}
		/>
	)}
</form.Field>

I just don't understand why this is left for the user to deal with especially when field.state.meta already includes isBlurred. By the way I did initially try setting isFocused to !field.state.meta.isBlurred, but that doesn't work. I must not understand what its for.

[kusiewicz]

afaik form libraries usually does not have handleFocus - its just don one the native html element - out of curiosity why do you need that? :)

[ravinggenius]

I mostly use it for styling, but I guess I can use :has() instead. I also use focus tracking to show extended help information for the field.

[ravinggenius]

Is there a downside to focus tracking other than an imperceptible memory bump?