[SalesForce] Unable to save on handleSubmit in a lightning-record-edit-form component

I'm having an issue trying to save a record I'm creating using LWC.

I have a "lightning-record-edit-form component" tag with its "onsubmit" and "onsuccess". Both execute properly if I let them do their job without any extra functionality.

But, I want to fill some fields before submitting, so, I add the

event.preventDefault();

statement and with

const fields = event.detail.fields;

I get the fields where I'm going to change the values. For example;

fields.Extra_data__c = 'Something';

When trying to submit this fields with

this.template.querySelector('lightning-record-edit-form').submit(fields);

I get an exception I'm unable to catch (I'll paste the error code at the end)

enter image description here

This is not the first component where I save this way, and trying to figure what is happening I found this in hopes it may help to find a reason.

In my previous component, when I print to the console the "fields" variable, I receive the fields of the object with empty values, but in this one the field variable is an empty array. Trying to fill any fields will mantain that variable empty. Submitting this will create the mentioned error.

I've tried refreshing and resetting the fields by calling

template.querySelector('lightning-record-edit-form');

But with no luck.

I'm completely stuck with this situation. Hope I can find some help.
Thank you very much!

[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:929:169
{anonymous}()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:929:362
g.dispatchEvent()@https://static.lightning.force.com/cs84/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_prod.js:3:25135
g.handleSubmit()@https://sandbox-orgname.lightning.force.com/components/interop/recordEditForm.js:2:8135

The LWC, I've removed all the input fields but one, all them have the same behaviour;

HTML

<template>
    <lightning-record-edit-form object-api-name="Case" onsuccess={handleSuccess} onsubmit={handleSubmit}>
             <lightning-input-field field-name="TXT_Street__c" name="street" onchange={assignFieldValue} value={caseVars.street}></lightning-input-field>
    </lightning-record-edit-form>
</template>

JS

assignFieldValue(event)
{
     this.caseVars[event.target.name] = event.detail.value;
}

handleSubmit(event)
{
     event.preventDefault();
     const fields = event.detail.fields; // It should have case fields, but is empty
     fields.street= this.caseVars.street; 
     this.template.querySelector('lightning-record-edit-form').submit(fields);
}

handleSuccess(event)
{
     console.log('This is your case Id: ' + event.detail.id);
}

Best Answer

Using event.stopPropagation() instead of event.prevenDefault() works for me:

  handleSubmit(event) {
    event.stopPropagation();

    const fields = event.detail.fields;
    fields.Custom__c = custom;
    this.template.querySelector("lightning-record-edit-form").submit(fields);
  }
Related Topic