[SalesForce] lightning-record-edit form not taking the focus to the required field

I'm using lightning-record-edit-form in the component, inside that i've input-field with required set to true

    <lightning-record-edit-form record-type-id={recordType} object-api-name="Case" onsubmit={handleSubmit}>
        <lightning-input-field field-name='Api Name' required=true></lightning-input-field>
...... with several other input fields
        <lightning-button class="slds-m-top_small" variant="brand" type="submit" label="Submit">
    </lightning-record-edit-form>

When i click on Submit without filling required the focus does not go to the required field/s. Unless user scroll up and down may not realize missing required fields.

Any solution ?

EDIT :

This problem exists for Picklist fields only not for normal Text.

Best Answer

You should receive a deployment error if you specify the required attribute in that way. See the error I received trying to do the same thing you have in your example: 

LWC1037: To set a boolean attributes, try <lightning-input-field required> instead of 
<lightning-input-field required="true">. If the attribute is present, its value must
either be the empty string or a value that is an ASCII case -insensitive match for the
attribute's canonical name with no leading or trailing whitespace.

I would recommend changing your attribute to only "required" (see below), verify that it deploys, and then test.

<lightning-input-field field-name="Api Name" required></lightning-input-field>

What is the data type of the field? That could also be a factor if it's a picklist. Only the following HTML tags will obey the required attribute in a form:

  • text
  • search
  • url
  • tel
  • email
  • password
  • date
  • number
  • checkbox
  • radio
  • file

Worst case scenario, you may have to do write your own validation.

EDIT: If you need to do your own validation, you need to add the logic to your onsubmit event handler, handleSubmit(). The handleSubmit method returns true if you want the submit to continue forward or false if you need to stop it for whatever reason. So your handleSubmit will look something like this:

handleSubmit(event) {
    return hasValidFields();
}

hasValidFields() {
    // do your validation here
    // use .focus() to focus in on fields that need addressed
    // I like to iterate over the fields here so that you can 
    // 1) apply focus to the first problem element and 
    // 2) put error styling on every other problem element
    // 3) amass a collection of error messages to show or use in other rules
    // .checkValidity() is a helpful method for checking HTML5 fields 
    // against specific patterns you may have set in the markup.

    return isValid;
}
Related Topic