React: Text position is not reset when reducing div size

The following code toggles the box from a non-scrollable short height to scrollable long height.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setOpen((open) => !open)}>
        {open ? "Close" : "Open"}
      </button>

      <div
        style={{
          width: "200px",
          border: "1px solid blue",
          ...(!open
            ? {
                height: "54px",
                overflow: "hidden",
              }
            : {
                height: "120px",
                overflowX: "hidden",
                overflowY: "auto",
              }),
        }}
      >
        very long text very long text very long text very long text very long
        text very long text very long text text very long text very long text
        text very long text very long text text very long text very long text
      </div>
    </div>
  );
}

1. I open the box
2. I scroll the text down
3. I close the box

Notice that the text in step 3 is still rendered in the position of step 2, but now it is not scrollable.

Is there an easy way to move the text to the top?

>Solution :

You have to use a ref to reset its scrollTop

import { useState, useRef } from "react";
import "./styles.css";

export default function App() {
  const ref= useRef(null);
  const [open, setOpen] = useState(false);

  const handleToggle = () => {
    ref.current.scrollTop = 0;
    setOpen((open) => !open);
  }

  return (
    <div className="App">
      <button onClick={handleToggle}>
        {open ? "Close" : "Open"}
      </button>

      <div
        ref={ref}
        style={{
          width: "200px",
          border: "1px solid blue",
          ...(!open
            ? {
                height: "54px",
                overflow: "hidden",
              }
            : {
                height: "120px",
                overflowX: "hidden",
                overflowY: "auto",
              }),
        }}
      >
        very long text very long text very long text very long text very long
        text very long text very long text text very long text very long text
        text very long text very long text text very long text very long text
      </div>
    </div>
  );
}