Feature request `initialHeight` or `minHeight`

[Albert]

I'm setting the initialHeight or minHeight with minRows={2} but it's not exactly. There is a possibility to add an initial height.

[Mateusz Burzyński]

You can provide style={{ height: 10 }} for this purpose

[Albert]

I added style={{ height: 48 }} but the value is replaced by style="height: 32px !important;". Also, I'm using TS so I tried to add minHeight but it is not allowed.

[Mateusz Burzyński]

Could you describe your use case? It sounds like you want a different height than computed through rows - this ain't possible and I'm not sure why you'd like it.

[Albert]

The idea that the min-height could be 48px. But with minRows={2} is height: 56px !important;. So I don't have way to set that value as min-height

source here

[Mateusz Burzyński]

I guess we could remove this restriction on style.minHeight:

react-textarea-autosize/src/index.tsx

Lines 47 to 51 in 58c9807

 if ('minHeight' in props.style) { 
   throw new Error( 
     'Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.', 
   ); 
 } 

Feel free to prepare a PR.

[ezci]

as a workaround;
textarea{ min-height: 0!important; }

[Valerii Korshun]

Instead of initialHeight I think you can remove the height from element.style, if minRows is not set, the component will take height from the css before the first resize.

[Dimitris Soldatos]

Have thte same problem

          <TextareaAutosize
            className="focus:pointer-events-auto border-1 rounded-sm border-[#434343] bg-[#141414] text-white hover:border-primary-accent"
            style={{ width: 365,height: 200 }}
            value={newComment}
            placeholder={"Comment"}
            onChange={(e) => setNewComment(e.target.value)}
          ></TextareaAutosize>

Only width works. The height value is replaced with "height: xxx px !important"

[Albert]

I created a component to work with auto-size. Maybe you can use the same library that I used to fix all your issues.

autosize

[Dimitris Soldatos]

Just find another way to do it without using react default textarea element

export const Component  = () => {
  
       // .................
      const [textareaHeight, setTextareaHeight] = useState("auto");
      const textareaRef = useRef<HTMLTextAreaElement | null>(null);
           useEffect(() => {
              if (textareaRef.current) {
                textareaRef.current.style.height = "auto";
                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
                setTextareaHeight(`${textareaRef.current.scrollHeight}px`);
             }
        }, [newComment]);

      return ( 
         <div>
              <textarea
                     ref={textareaRef}
                     className="border-1 rounded-sm border-[#434343] bg-[#141414] text-white hover:border-primary-accent focus:pointer-events-auto"
                     cols={33}
                     rows={3}
                     value={newComment}
                     placeholder={"Comment"}
                     style={{ height: textareaHeight }}
                     onChange={(e) => setNewComment(e.target.value)}
                ></textarea>
          </div>
       )
}