tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): properly allows configuring rows for the textarea field (#10031)

Browse Source 
### What?

Previously, setting the `admin.rows` property did not change the height
of the `textarea` field input.

### Why?

Although `rows` was being properly set on the textarea element - it's
absolute positioning prevented the height from actually changing.

### How?

Updates the styles of the textarea field component to properly allow the
rows prop to change the height of the field.

Example w/:

```
{
  name: 'someTextArea',
  type: 'textarea',
  admin: {
    rows: 5,
  }
}
```
Before:
![Screenshot 2024-12-17 at 2 50
19 PM](https://github.com/user-attachments/assets/35d433c3-2fad-4930-9da6-b47b5e180af8)

After:
![Screenshot 2024-12-17 at 2 50
00 PM](https://github.com/user-attachments/assets/1a413639-ac29-46ce-b774-e1a30c5a21f0)

Fixes #10017
This commit is contained in:
Patrik
2024-12-17 15:46:11 -05:00
committed by GitHub
parent 4bfa329fa4
commit 61c5e0d3e0
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/fields/textarea.mdx
View File

@@ -68,11 +68,12 @@ export const MyTextareaField: Field = {
The Textarea Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options: The Textarea Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
| Option | Description | | Option | Description |
| -------------- | ---------------------------------------------------------------------------------------------------------------- | | ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
| **`placeholder`** | Set this property to define a placeholder string in the textarea. | | **`placeholder`** | Set this property to define a placeholder string in the textarea. |
| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. | | **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. |
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. | | **`rows`** | Set the number of visible text rows in the textarea. Defaults to `2` if not specified. |
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
## Example ## Example

21
packages/ui/src/fields/Textarea/index.scss
View File

@@ -40,9 +40,8 @@
// Unstyle the textarea, the border is rendered on .textarea-outer // Unstyle the textarea, the border is rendered on .textarea-outer
.textarea-element { .textarea-element {
position: absolute; position: relative;
top: 0; z-index: 1;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: inherit; border: inherit;
@@ -66,13 +65,17 @@
// Clone of textarea with same height // Clone of textarea with same height
.textarea-clone { .textarea-clone {
vertical-align: top; position: absolute;
display: inline-block; top: 0;
flex-grow: 1; left: 0;
overflow: hidden; right: 0;
text-overflow: ellipsis; bottom: 0;
white-space: pre-wrap;
pointer-events: none; pointer-events: none;
white-space: pre-wrap;
overflow-wrap: break-word;
visibility: hidden;
z-index: 0;
line-height: inherit;
} }
.textarea-clone::before { .textarea-clone::before {