[BUG] - Input with "datetime-local" type has wrong margin when setting min/max date

[JobberRT]

NextUI Version

2.3.6

Describe the bug

The Input component will have a wrong padding/margin when using datetime-local with min/max and some of the field are disabled.

Bug screenshot

Normal screenshot

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Create a Input component and set its max to now(so that some fields can be disabled, like year).

Expected behavior

The margin/padding is correct

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-856 [BUG] - Input with "datetime-local" type has wrong margin when setting min/max date

[wingkwong]

Can you share the code you used for the screenshot?

[JobberRT]

@wingkwong

const [tt, setTT] = useState("2024-05-20T12:00:00");

<div className={"flex flex-row flex-wrap items-center justify-between gap-3 sm:gap-5 md:gap-10 lg:gap-16"}>
    <div className={"flex flex-grow"}>
        <div className={"flex items-center justify-center gap-0.5"}>
            <Input type={"datetime-local"} value={tt} onValueChange={setTT} 
                   max={new Date(Date.now()).toISOString().slice(0, -5)} 
                   min={new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString().slice(0, -5)} />
        </div>
    </div>
</div>

[wingkwong]

@JobberRT I still don't know how to reproduce the issue based on this code. Can you elaborate more?

[JobberRT]

@wingkwong Maybe because you are using PM/AM while I'm using 24H ? In my environment, the exact same code can reproduce the bug though.

I also tried remove the "second" part of the time string, the bug is still there

[wingkwong]

Can you share a stackblitz project so that we could be on the same ground?

[JobberRT]

Sure, Here's the link: https://stackblitz.com/edit/vitejs-vite-x36zme?file=src%2FApp.tsx

[wingkwong]

wondering if you see the same screen

[JobberRT]

Seems not... I got not PM/AM choice, it's 24H. May this be the issue?