How to setValue null to number input?

[narbek-abd]

import * as V from "valibot";
import { useForm } from "react-hook-form";
import { valibotResolver } from "@hookform/resolvers/valibot";

export const schema = V.object({
  numberRequired: V.number(),
});

export default function Page() {
  const f = useForm<V.InferOutput<typeof schema>>({
    resolver: valibotResolver(schema),
    defaultValues: {
      numberRequired: undefined,
    },
  });

  function howToSetValueEmpty() {
    f.setValue("numberRequired", undefined); // undefined is not allowed for setValue
    f.setValue("numberRequired", null); // Argument of type 'null' is not assignable to parameter of type 'number'
  }
}

if i make this filed V.nullable(), then it's no longer a required filed

[narbek-abd]

solution:

import * as V from "valibot";
import { useForm } from "react-hook-form";
import { valibotResolver } from "@hookform/resolvers/valibot";

// thanks to https://github.com/fabian-hiller/valibot/issues/1088
function initialNullable<TSchema extends V.GenericSchema>(schema: TSchema) {
  return V.pipe(V.nullable(schema), schema);
}

export const schema = V.object({
  numberRequired: initialNullable(V.pipe(V.number())),
});

export default function Page() {
  const f = useForm<V.InferInput<typeof schema>>({
    resolver: valibotResolver(schema),
    defaultValues: {
      numberRequired: null,
    },
  });

  function setNull() {
    f.setValue("numberRequired", null); 
  }

  function onSubmit(body) {
    const data = body as V.InferOutput<typeof schema>;
   }

}