Semantic-ui-react: TextArea incorrect height with autoHeight prop when element is not visible

[rizedr]

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

[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

[rizedr]

@levithomason I know that the TextArea must be under a ui form parent, but that is not the cause of the issue. The code I posted is literally what sits inside a <Form /> component in my project ;)

To prove you wrong, this is how it looks if it's not placed under a parent with the ui form class (to notice, it's not the same way it renders to me in the first post):

Also, for who ever is interested, is redundant to place a <Form> around each element in my case when you can & you should, just wrap everything in a <Form>:

<Form>
  <Grid>
    ...
  </Grid>
</Form>

Anyway, as stated at the start of the issue, the update I did:

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.

The key word is tabular items. I don't have time now to replicate the exact case, but as I previously said, I will come back.

However, @levithomason given your answer and that you've closed this thread, should I open a new one once I've got the demo going?

[levithomason]

Issues are very easy to re-open :) If we can get a repro of this issue we will certainly re-open it. Currently, all we have are working docs and passing tests for this feature.

[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.

[rizedr]

@edchiou you are the man, it's a perfect example. I've literally forgotten to come back and update the issue, even though I've previously said this:

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.

From my findings, the reason why this is happening is because of display: none; / display: block to toggle visibility on and off. When the element has display: none on it, the TextArea autoheight will fail to compute the correct height. @levithomason I think this calls for opening this issue.

@edchiou the way I've managed to overpass the issue, was to leverage opacity: 0; visibility: hidden; position: absolute; / opacity: 1; visibility: visible; position: relative; properties for toggling hidden visibility of element.

[mihai-dinculescu]

Any news on this? I'm encountering the same issue with a TextArea found inside a tab.

[rizedr]

@mihai-dinculescu the way I've handled this issue was to have the not-active tab render with display: none style and the one visible with display: block. Of course, the switch between tabs means updating the display property.

[levithomason]

Fixed in #1793. Thanks for the reporting.