why the field is not touched when focused

[lauterry]

Hello

I wonder why the field is not marked as touched when the user focus on the input, even without typing anything.

Best regards

[johnrom]

Touched indicates that a field has been visited by the user. In many UI circles, receiving feedback before a user has completed their first attempt at a field is unexpected. The touched property indicates that a user may have completed their first attempt when removing focus from the field, and is often used for displaying errors. See the ErrorMessage component for example.

[lauterry]

Hi

Thank for your answer. I understand.

For the behaviour illustrated below, when the user click on the input, the label goes on top, I rely on touched attribute to apply a specific css class for the label animation.

This work as expected when the user enters something in the input but not when the user only focus the input.

My workaround is :

const [helpers] = useField();

const setTouchedOnFocus =() => {
	helpers.setTouched(true);
};

<input
	onFocus={setTouchedOnFocus}
/>

Is there another elegant or more more straightforward way to do that ?

Best regards

[johnrom]

You can use input:focus.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

[johnrom]

Alternatively you can use onFocus and onBlur outside of Formik to set your class:

const useFocus = (handleBlur, handleFocus) => {
  const [isFocused, setIsFocused] = React.useState(false);
  const onFocus = React.useCallback((event) => {
    setIsFocused(true);
    handleFocus?(event);
  }, [handleFocus]);
  const onBlur = React.useCallback((event) => {
    setIsFocused(false);
    handleBlur?(event);
  }, [handleBlur]);

  return { isFocused, onFocus, onBlur };
}

const MyField = (props) => {
  const [field] = useField(props.name);
  const {onFocus, onBlur, isFocused} = useFocus(field.handleBlur);

  return <div className={isFocused ? "focused" : ""}>
    <input {...field} onFocus={onFocus} onBlur={onBlur} />
  </div>;
}

[lauterry]

Hi

Thank for you reply.

This is what I end up with

[ravis-farooq]

onFocus: () => setFieldTouched('name of formik field you want to set touched property', true),

[elrouss]

A nice solution. Thank's!