TextArea incorrect height with autoHeight prop when element is not visible

Update Managed to find out exactly why this issue happens. Will come back and edit this with and jsfiddle that replicates exactly this issue. Spoiler, it has to do with setting tabular items.

I am getting this weird issue when using Form.TextArea with autoHeight and disabled props. The height of the textarea is not set correctly as you can see in the SS below:

Here is the JSX:

<Grid>
  <Grid.Row columns={2}>
    <Grid.Column>
      <Header size="small">General Conditions</Header>
      <Form.TextArea label="Textarea 1" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
    <Grid.Column>
      <Header size="small">Special Conditions</Header>
      <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
  </Grid.Row>
  <Grid.Row columns={2}>
    <Grid.Column>
      <Form.TextArea label="Textarea 2" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
    <Grid.Column>
      <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
  </Grid.Row>
  <Grid.Row columns={2}>
    <Grid.Column>
      <Form.TextArea label="Textarea 3" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
    <Grid.Column>
      <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
    </Grid.Column>
  </Grid.Row>
</Grid>

Under inspect element, the style properties for the TextArea are being set as:

min-height: 0px;
resize: none;
height: 2px;

Where the height: 2px is obviously wrong.

Version

0.67.0

[edchiou]

Version: 0.67.1

I was able to reproduce the problem with AutoHeight when trying to render a Form.TextArea component inside an Accordion.

import React from 'react'
import { Form, Accordion, Label, Message } from 'semantic-ui-react'
import faker from 'faker'
import _ from 'lodash'

const panels = _.times(3, i => ({
  key: `panel-${i}`,
  title: <Label color='blue' content={faker.lorem.sentence()} />,
  content: (
    <Form>
      <Form.TextArea placeholder='Try adding multiple lines' autoHeight />
    </Form>
  ),
}))

const AccordionExamplePanelsPropWithCustomTitleAndContent = () => (
  <Accordion panels={panels} />
)

export default AccordionExamplePanelsPropWithCustomTitleAndContent

It looks like this:

When I start typing inside the text area, it will immediately resize to the correct height.

[levithomason]

Form.TextArea renders a form field with a textarea child. The code provided is missing the Form around the Form.TextArea. Pasting the above example into the doc site and correcting the markup renders:

import React from 'react'
import { Grid, Header, Form } from 'semantic-ui-react'

const TextAreaExampleAutoHeight = () => (
  <Grid>
    <Grid.Row columns={2}>
      <Grid.Column>
        <Header size="small">General Conditions</Header>
        <Form>
          <Form.TextArea label="Textarea 1" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
      <Grid.Column>
        <Header size="small">Special Conditions</Header>
        <Form>
          <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
    </Grid.Row>
    <Grid.Row columns={2}>
      <Grid.Column>
        <Form>
          <Form.TextArea label="Textarea 2" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
      <Grid.Column>
        <Form>
          <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
    </Grid.Row>
    <Grid.Row columns={2}>
      <Grid.Column>
        <Form>
          <Form.TextArea label="Textarea 3" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
      <Grid.Column>
        <Form>
          <Form.TextArea label="&nbsp;" defaultValue="Lorem Ipsum" disabled readOnly autoHeight />
        </Form>
      </Grid.Column>
    </Grid.Row>
  </Grid>
  )

export default TextAreaExampleAutoHeight