Change scrollHeight of other component-CodePudding

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?

CodePudding user response：

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>
  );
};

CodePudding user response：

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.