Forms: Multi-Line Text Field width options don't work as expected after the input has been resized using the drag handle

[talldan]

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 <textarea> 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

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

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Editor Experience: The issue pertains to the block editor and how it interacts with the multi-line text field and its resizing functionality.
• [Feature] Contact Form: The issue directly involves the contact form feature, specifically its multi-line text field.
• [Feature] Forms Blocks: It relates to the blocks designed for user input and engagement, which includes the affected multi-line text area.