Skip to content

fix(ui): prevent textarea description overlapping fields and not honoring rows attribute #12406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

akhrarovsaid
Copy link
Contributor

@akhrarovsaid akhrarovsaid commented May 14, 2025

What?

This PR fixes a few issues with the textarea field. Namely, it fixes an issue where the field description would bleed into and overlap subsequent fields, as well as fixing the rows attribute not being honored despite being set in config. It also makes the field more accessible by trigging focus of the textarea when the the field label is clicked, which was not happening previously.

Why?

To prevent the field description from overlapping subsequent fields, honor the rows attribute while preserving field-sizing and better accessibility when clicking on the field label.

How?

  • Wrapping the field in a label somehow prevented the parent block element from calculating the correct height, which allowed for overlap. This was changed to be a div and instead the main field label was given an htmlFor attribute.
  • The field-sizing property and the rows attribute are, currently, incompatible with each other as well as height. So, we use CSS variables and some math to compute the min-height to emulate rows instead. The formula is as follows: numRows * lineHeight + padding(y-axis) + borderWidth(y-axis) implemented as calc(var(--rows) * base(1) + base(0.8) + 2px).
  • Providing the FieldLabel component with an htmlFor attribute the same as its id.

Fixes #12393

Before:
443106035-6a106ec6-232e-4caf-93df-dc980e52de29

After:

Creating---Post---Payload.webm

The following config was used in the demo above:

export const PostsCollection: CollectionConfig = {
  slug: postsSlug,
  admin: {
    useAsTitle: 'title',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
    },
    {
      type: 'row',
      fields: [
        {
          name: 'firstText',
          type: 'textarea',
          admin: {
            description: 'short length text.',
            width: '33%',
            rows: 3,
          },
        },
        {
          name: 'secondText',
          type: 'textarea',
          required: false,
          admin: {
            description:
              'middle length text. middle length text. middle length text. middle length text. middle length text. middle length text.',
            width: '33%',
            rows: 4,
          },
        },
        {
          name: 'thirdText',
          type: 'textarea',
          required: false,
          admin: {
            description:
              'long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text. long length text.',
            width: '33%',
            rows: 5,
          },
        },
      ],
    },
    {
      name: 'singleLineText',
      type: 'text',
    },
  ],
}

…ring rows attribute
@akhrarovsaid akhrarovsaid changed the title fix(ui): prevent textarea description overlapping fields and not hono… fix(ui): prevent textarea description overlapping fields and not honoring rows attribute May 14, 2025
@JarrodMFlesch JarrodMFlesch self-requested a review May 27, 2025 14:17
@JarrodMFlesch JarrodMFlesch merged commit 032375b into payloadcms:main May 27, 2025
74 of 76 checks passed
@akhrarovsaid akhrarovsaid deleted the fix/textarea-overlap-and-rows branch May 27, 2025 20:28
Copy link
Contributor

🚀 This is included in version v3.40.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Textarea field overlap in UI
2 participants