Textarea shrinks vertically, after resetting my form

[Luke G.]

After resetting the form, it appears to save the height from before it was reset. This is not desired in this case.

Before reset:

Then I add content and reset the form

After Refresh:

The behavior I am expecting after a reset of this form, is for the autosize-text-area's to return to the height of the placeholder text.

How can I achieve this behavior?

CSS:

.flex-text-area {
    display: flex;
    flex-direction: column;
 }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font: 1rem / 1.5 sans-serif;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.75rem;
}

input,
select,
.text-area-react {
  border: 2px solid #333;
  background-color: white;
  border-radius: 0.25rem;
  overflow-y: hidden
}

HTML inside of my return function to go to app.js:

<div className="input-container flex-text-area">
          <label htmlFor="residenceHistory">Residence History</label>

          <TextareaAutosize
            placeholder="List here, your place(s) of residence for the past 5 years. For each place of residence, please provide the contact infomation and name for your former landlord/manager. If you have not rented during the past 5 years, please provide a short explaination as to why."
            id="residenceHistory"
            className="text-area-react"
            required
          />
        </div>

        <div className="input-container flex-text-area">
          <label htmlFor="pets">Pets</label>
          <TextareaAutosize
            id="pets"
            className="text-area-react"
            placeholder="List here, all of the pets you have or are interested in. Please be honest about the types of pets, as well as the quantity of pets. We allow pets, but must be informed to establish if a pet deposit is required. We allow pets including, but not limited to Cats, Dogs, Birds, Fish, Reptiles, & Small Mammals."
            required
          />
        </div>

        <div className="input-container flex-text-area">
          <label htmlFor="contactForEmployer">
            Employer Contact information
          </label>
          <TextareaAutosize
            placeholder="List here, the name and contact information for your current employer."
            id="contactForEmployer"
            className="text-area-react"
            required
          />
        </div>

        <div className="input-container flex-text-area">
          <label htmlFor="message">Message:</label>
          <TextareaAutosize
            className="text-area-react"
            placeholder="Use this space, for any questions, concerns, or comments you have about the application process."
            id="message"
            required
          />
        </div>`

[Mateusz Burzyński]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[Luke G.]

My apologies, Here is a repo of this project. https://github.com/PersonGuyGit/TestForReactTextSize