Automattic / Automattic/jetpack
Forms: Multi-Line Text Field width options don't work as expected after the input has been resized using the drag handle
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Quick summary
If you resize the Multi-Line Text Field using the drag handle in the bottom right corner of the textarea, and then try setting a width from the block inspector, the input won't adopt the correct size in the editor (it still works ok on the frontend).
The drag handle is setting an inline width style on the `` element, which doesn't work so well with the block's other styles, as they rely on setting a width on the block wrapper.
Additionally, using the drag handle to resize the textarea doesn't affect the frontend styles at all, so maybe it should be prevented (using css like `width: 100% !important; height: auto !important;` might be one way, there might also be others). Or it could be supported, but this seems like it would be inconsistent with other fields. Though support for a height might be nice.
### Steps to reproduce
1. Add a contact form
2. Resize the Message field using the little drag handle in the bottom right of the text area
3. Now try setting a width using the block inspector
4. See that there can be some unexpected style breakage in the editor
<img width="639" alt="Image" src="https://github.com/user-attachments/assets/1680373a-7bc2-443f-9c46-8df902d80e03" />
### Site owner impact
Fewer than 20% of the total website/platform users
### Severity
Minor
### What other impact(s) does this issue have?
No revenue impact
### If a workaround is available, please outline it here.
The problem goes away if the user reloads the browser, so not a critical issue, but it might be a confusing experience.
### Platform (Simple and/or Atomic)
Simple, Atomic, Self-hosted
Contributor guide
Research direction
Reproduce the issue with a Jetpack contact form by resizing the Message field, then changing its width in the block inspector. Inspect how the textarea’s inline width interacts with the editor’s block-wrapper styles and compare the editor result with the frontend; done means width changes remain correct after resizing and the intended drag-handle behavior is consistent.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, react, wordpress
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100