[BUG] - Textarea component height shifting

[uigywnkiub]

NextUI Version

2.4.2

Describe the bug

When reloading the page, Textarea's custom height is shifting/jumping.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

'use client'
...
   <Textarea
      label='Feedback'
      placeholder='Type your feedback...'
      description='The feedback is completely anonymous.'
      className='mx-auto max-w-md'
      maxRows={30}
      minRows={5}
      maxLength={text.length > MAX_TEXT_LENGTH ? MAX_TEXT_LENGTH : undefined}
      isInvalid={text.length > MAX_TEXT_LENGTH}
      errorMessage={`Feedback must not exceed ${MAX_TEXT_LENGTH} characters.`}
      onChange={onChangeCallback}
    />

Expected behavior

Textarea custom height should not jumping

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/29861553/1252f54c-22da-421d-9de9-e1a1b8a37971

Operating System Version

• OS: macOS

Browser

Chrome

[linear[bot]]

ENG-1043 [BUG] - Textarea component height shifting

[elnfar]

Can you please give more info, it seems to be fine. There seems to be no jumping or unexpected behaviour.

[wingkwong]

I couldn't reproduce the issue with your example but able to reproduce in full-rounded story.

[uigywnkiub]

I couldn't reproduce the issue with your example but able to reproduce in full-rounded story.

On story book it also shifting, how you can ignore it?

[uigywnkiub]

Can you please give more info, it seems to be fine. There seems to be no jumping or unexpected behaviour.

Open your eyes please!

[elnfar]

Can you please give more info, it seems to be fine. There seems to be no jumping or unexpected behaviour.

Open your eyes please!

Get your shit together man, provide more infor to make it more easier. If more than a person comments something it means something is wrong, I checked it, there is seems to be no issue, if you wanna make me wrong the provide more details otherwise fuck off.

[uigywnkiub]

Can you please give more info, it seems to be fine. There seems to be no jumping or unexpected behaviour.

Open your eyes please!

Get your shit together man, provide more infor to make it more easier. If more than a person comments something it means something is wrong, I checked it, there is seems to be no issue, if you wanna make me wrong the provide more details otherwise fuck off.

I sent a code and a video screen, it’s ALL the info that I have about it!

[elnfar]

Can you please give more info, it seems to be fine. There seems to be no jumping or unexpected behaviour.

Open your eyes please!

Get your shit together man, provide more infor to make it more easier. If more than a person comments something it means something is wrong, I checked it, there is seems to be no issue, if you wanna make me wrong the provide more details otherwise fuck off.

I sent a code and a video screen, it’s ALL the info that I have about it!

Well, yeah good luck then. I cloned, created new page imported component TEXTAREA checked current ones double,triple checked there is no jumping. Just maybe it was sth for a short time, I advise you to check once again to see if its fixed.

[uigywnkiub]

1. Init page (height about 55px)

2. After some milliseconds (height about 96px)

How else info do you need? Open your eyes please and do not ask stupid questions.

[uigywnkiub]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

[uigywnkiub]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

i'm checking on storybook, can't hold will fork again, wait I will send you

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

[uigywnkiub]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

But I need disableAutosize...

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

But I need disableAutosize...

You can remove the disableAutosize, but I think you still have the initial height for example: classNames={{ base: "max-w-xs", input: "resize-y min-h-[140px]", }}

then its fine.

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

But I need disableAutosize...

I mean it seems like component wants us to enter initial height, coz it says either enter height or I will have authoSize, if you want you can disableAutosize.

[uigywnkiub]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

But I need disableAutosize...

You can remove the disableAutosize, but I think you still have the initial height for example: classNames={{ base: "max-w-xs", input: "resize-y min-h-[140px]", }}

then its fine.

Okay, min-h is that what I want. Thanks

[elnfar]

@elnfar

maxRows={30}
minRows={5}

Add this props maxRows={30} minRows={5}

poor

Show me video with Textarea and this props

I think whatever you experience is a feat not a bug, but adding disableAutosize to your <Textarea disableAutosize/> will solve your problem!

But I need disableAutosize...

You can remove the disableAutosize, but I think you still have the initial height for example: classNames={{ base: "max-w-xs", input: "resize-y min-h-[140px]", }} then its fine.

Okay, min-h is that what I want. Thanks

welcome, I had min-height by default that's why it wasn't jumping for me :D

[sohan01fw]

@wingkwong i think this issue need to closed .The issue is in user code

[vctrgtzm]

Facing same issue here, seems to be a problem with SSR, on page load, the default height is rendered, once the JS chunk of the component gets downloaded, it adds the style to set the custom height and that's what causes the shifting.

[sohan01fw]

@vctrgtzm i think the problem is with your css cause i try to reproduce bug i didn't get it.

[vctrgtzm]

@sohan01fw I just tested with a fresh project with no custom css and the issue is there, it seems to be that the css required to set the input's height is set client side instead of server-side rendering the element with the required classes/style.

I put together this small repo where it can be reproduced.

Also you can have a look at this page, with the production build is almost imperceptible but it happens.

See the following video as well on dev:

https://github.com/user-attachments/assets/49d6b5de-47f1-4dde-8544-d513db9ee6de

[x-6]

It happened to me, too.

[mengxi-ream]

I have the same issue, it's in a new Next.js project and there is the code. just a client component in a server page component

"use client";

import { useState } from "react";
import { Button, Textarea } from "@nextui-org/react";

export default function Header() {
  const [prompt, setPrompt] = useState("");

  const handleSubmit = () => {
    console.log(prompt);
  };

  return (
    <section id="header">
      <Textarea
        placeholder="What do you feel right now?"
        className="max-w-md"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <Button color="primary" onClick={handleSubmit}>
        Generate
      </Button>
    </section>
  );
}

https://github.com/user-attachments/assets/f33fb3a2-05dc-4af7-aa80-10ddca86afbe

I think for textarea without too much css setting shouldn't jump