I have component like this:
const Panel = () => {
const input = useRef<HTMLTextAreaElement>(null);
return (
<Wrapper>
<Input
ref={input}
/>
<Button
onClick={() => {
input.current?.scrollHeight = "";
}}
>
</Button>
</Wrapper>
);
};
I need to change the Input's scrollHeight on Button click, so I tried to use useRef, but I get an error: Cannot assign to 'scrollHeight' because it is a read-only property. How can I fix it?
I don't have a lot to go off of, from what you've written, but something like this might help:
const Panel = () => {
const input = useRef<HTMLTextAreaElement>(null);
// collect the current style height that is used to establish the scroll height
const height = document.getElementyById()?.clientHeight
return (
<Wrapper>
<Input
ref={input}
/>
<Button
onClick={() => {
function (){
document.getElementById()?.style.height = `${height}px`;
}}
> // add to the height this way, start with the clientheight and add to it
</Button>
</Wrapper>
);
};
As per the docs
The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
Depending on what you want to achieve, you may want to use window.pageYOffset || document.documentElement.scrollTop to measure element's distance from the top, or manipulate one of the getBoundingClientRect() properties.
Or perhaps if you just want to reduce the elements dimensions, you may want to set fixed height and set overflow to scroll.