[BUG] - TimeInput nextJS hydration issue.

[exotexot]

NextUI Version

2.3.6

Describe the bug

Hello,

I wanna use TimeInput, with react-hook-form and zod validation.
I do get an hydration error:

"Unhandled Runtime Error

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Text content did not match. Server: " " Client: " 

Here's my code

"use client"

import React from "react"
import { Button } from "@nextui-org/react"
import { Controller, useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { TimeInput } from "@nextui-org/react"
import { Time } from "@internationalized/date"
import { z } from "zod"

export const FormSchema = z.object({
	arrival: z.date().optional(),
})

const Form = () => {
	const {
		register,
		control,
		handleSubmit,
		formState: { errors },
		setValue,
	} = useForm({
		resolver: zodResolver(FormSchema),
	})

	const onSubmit = async (data: any) => {
		console.log("data", data)
	}

	console.log("errors", errors)

	return (
		<form
			onSubmit={handleSubmit(onSubmit)}
		>
			<Controller
				name="arrival"
				control={control}
				defaultValue={new Time(new Date().getHours(), new Date().getMinutes())}
				render={({ field }) => (
					<TimeInput
						{...field}
						label="Arrival Time"
						isInvalid={Boolean(errors && errors[field.name])}
						errorMessage="Please enter a valid time"
					/>
				)}
			/>

			<Button
				type="submit"
				color="primary"
			>
				Send
			</Button>
		</form>
	)
}

export default Form

When I open the page, It immediately shows the error message of the TimeINput field, "Please enter a valid time" - even though I didn't make an input, and I should just hold the new Time() element defined int the inputs controller node.

Also the "errorMessage" is always showing when the prop is set - idenpendent of the isInvalid flag.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. use TimeInput
2. Use my test code
3. See issue.

Expected behavior

No hydration warning

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Safari

[linear]

ENG-763 [BUG] - TimeInput doesn't work with react-hook-form.

[wingkwong]

@exotexot what does this console.log("errors", errors) show in console? also please provide a stackblitz link instead for us to investigate without extra setup.

[wingkwong]

Closing due to inactivity