AutoForm submits when pressing Return key, even in TextArea fields

[sahrmann]

Describe the bug

When using a TextArea in an AutoForm like this

renderer: ({ field }) => <TextArea {...field} label="Full description" />,

and the return key is pressed in the field, the form is submitted.

Expected-behavior

In a TextArea, the return key should only create a new line.

Reproduction

Can be observed in the examples at https://vaadin.com/docs/latest/components/auto-form#customizing-field-properties.

System Info

Vaadin 24.4.10

[Legioth]

I haven't tested it, but I suspect that a workaround could be to add a simple key down listener to the text area that only does event.stopPropagation().

[nisha8c]

I tried something like this:

const handleKeyDown = (event: React.KeyboardEvent) => {
const target = event.target as HTMLElement;
if (event.key === 'Enter' && target.tagName !== 'TEXTAREA') {
// Prevent form submission if Enter is pressed outside the TextArea
event.preventDefault();
}
};

<TextArea {...field(model[fieldName] as unknown as AbstractModel)} className={'w-full'} label={'Message:'} required={true} style={{ width: '100%', minHeight: '200px', maxHeight: '250px' }} placeholder={'Write a message'} onValueChanged={handleTextAreaChange} onBlur={handleTextAreaBlur} onKeyDown={handleKeyDown} // Attach the refined handler here ></TextArea>

But it does not work. I tried stopPropagation as well.

if there is a way to access event of form submission, I could have added a check to see if the textArea is in Focus and enter key is pressed then form won't be submitted.

Would like to get a solution on this.

[nisha8c]

it works now

<TextArea {...field(model[fieldName] as unknown as AbstractModel)} className={'w-full'} label={'Message:'} required={true} style={{ width: '100%', minHeight: '200px', maxHeight: '250px' }} placeholder={'Write a message'} onValueChanged={handleTextAreaChange} onBlur={handleTextAreaBlur} onKeyDown={(event) => { event.stopPropagation(); }} ></TextArea>

        In this case event: React.KeyboardEvent<TextArea>

[vaadin-bot]

This ticket/PR has been released with Hilla 24.5.0.beta2 and is also targeting the upcoming stable 24.5.0 version.