[BUG] - DatePicker - Hydration failed because the server rendered HTML didn't match the client.

[crystalends]

HeroUI Version

2.7.2

Describe the bug

When reloading a page, when granularity contains something that will add a time selection, an error appears: Hydration failed because the server rendered HTML didn't match the client. As a result, this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used.

The error description contains:

...
  <Form3 validationErrors={undefined}>
    <Form2 validationErrors={undefined} ref={null} validationBehavior="native">
      <form noValidate={false} ref={{current:null}} className="flex flex-...">
        <HeroUI.Input>
          <DatePicker2 label="Expires" granularity="minute" value={{calendar:{...}, ...}} ...>
            <DateInput2 as={undefined} label="Expires" ref={{current:null}} inputRef={undefined} description={undefined} ...>
              <HeroUI.DateInputGroup as={undefined} label="Expires" description={undefined} endContent={<HeroUI.Button>} ...>
                <div data-slot="base" data-required={undefined} data-disabled={undefined} data-readonly={undefined} ...>
                  <div onKeyDown={function} onClick={function onClick} onPointerDown={function} onMouseDown={function} ...>
                    <span>
                      <div ref={{current:null}} data-slot="inner-wrapper" className="flex items...">
                        <HeroUI.DateInputField classNames={undefined} inputProps={{type:"text", ...}} ...>
                          <div data-slot="input-field" data-invalid={undefined} id="react-aria..." data-open={undefined} ...>
                            <DateInputSegment>
                              <DateInputSegment>
                                <DateInputSegment>
                                  <DateInputSegment>
                                    <DateInputSegment>
                                      <DateInputSegment>
                                        <DateInputSegment>
                                          <DateInputSegment>
                                            <DateInputSegment>
                                              <DateInputSegment classNames={undefined} segment={{type:"literal", ...}} ...>
                                                <div
                                                  aria-hidden={true}
                                                    ref={{current:null}}
                                                      className={"group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content ..."}
                                                        data-editable={undefined}
                                                          data-invalid={undefined}
                                                            data-placeholder={undefined}
                                                              data-slot="segment"
                                                                data-type="literal"
                                                                  style={{}}
                                                                    >
                                                                      ...
                                                                        ...
                                                                          ...
                                                                            ...
                                                                              ...
+                                                                      {" "}
-                                                                      {" "}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Add DatePicker component
2. Pass everything that adds time to the granularity props, for example granularity="minutes"

Expected behavior

Absence of this error.

Screenshots or Videos

No response

Operating System Version

Linux

Browser

Firefox

[linear]

ENG-2249 [BUG] - DatePicker - Hydration failed because the server rendered HTML didn't match the client.

[crystalends]

solution
granularity={isSSR ? "day" : "second"}

[wingkwong]

please share a sandbox instead.

[crystalends]

https://codesandbox.io/p/devbox/sleepy-neco-6c2zhv

[e2corporation]

In the example code provided a div is a child element of span which is not allowed. (Invalid HTML Tag nesting)

<span>
   <div ref={{current:null}} data-slot="inner-wrapper" className="flex items...">