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

Open
#41,419 1 comment 0 reactions 0 assignees View on GitHub
[Experiment] AI labels added [Feature Group] Editor Experience [Feature] Forms [Feature] Forms Blocks [Plugin] Jetpack [Pri] Low [Status] Auto-allocated Bug Triaged
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.