Skip to content

Commit 61c5e0d

Browse files
authored
fix(ui): properly allows configuring rows for the textarea field (#10031)
### 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
1 parent 4bfa329 commit 61c5e0d

File tree

2 files changed

+18
-14
lines changed

2 files changed

+18
-14
lines changed

docs/fields/textarea.mdx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,12 @@ export const MyTextareaField: Field = {
6868

6969
The Textarea Field inherits all of the default options from the base [Field Admin Config](../admin/fields#admin-options), plus the following additional options:
7070

71-
| Option | Description |
72-
| -------------- | ---------------------------------------------------------------------------------------------------------------- |
73-
| **`placeholder`** | Set this property to define a placeholder string in the textarea. |
74-
| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. |
75-
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
71+
| Option | Description |
72+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------- |
73+
| **`placeholder`** | Set this property to define a placeholder string in the textarea. |
74+
| **`autoComplete`** | Set this property to a string that will be used for browser autocomplete. |
75+
| **`rows`** | Set the number of visible text rows in the textarea. Defaults to `2` if not specified. |
76+
| **`rtl`** | Override the default text direction of the Admin Panel for this field. Set to `true` to force right-to-left text direction. |
7677

7778
## Example
7879

packages/ui/src/fields/Textarea/index.scss

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,8 @@
4040

4141
// Unstyle the textarea, the border is rendered on .textarea-outer
4242
.textarea-element {
43-
position: absolute;
44-
top: 0;
45-
left: 0;
43+
position: relative;
44+
z-index: 1;
4645
width: 100%;
4746
height: 100%;
4847
border: inherit;
@@ -66,13 +65,17 @@
6665

6766
// Clone of textarea with same height
6867
.textarea-clone {
69-
vertical-align: top;
70-
display: inline-block;
71-
flex-grow: 1;
72-
overflow: hidden;
73-
text-overflow: ellipsis;
74-
white-space: pre-wrap;
68+
position: absolute;
69+
top: 0;
70+
left: 0;
71+
right: 0;
72+
bottom: 0;
7573
pointer-events: none;
74+
white-space: pre-wrap;
75+
overflow-wrap: break-word;
76+
visibility: hidden;
77+
z-index: 0;
78+
line-height: inherit;
7679
}
7780

7881
.textarea-clone::before {

0 commit comments

Comments
 (0)